如何以html格式添加可选列

I'm trying to make an appointment management using php and mysql so a user can register himself by filling a form. I have added a checkbox naming Mon, ) .Tue, Thu ... and gave two fields time_from and time_to (start time and end ti). I will split these time and store it in my db.

The problem is what if user have different timings on different days of the week like someone might work 9 - 5 on Monday to Friday and 11-2 on Saturday.

I want to capture these values when a user registers. Can I add an optional field in my html form or is there any other way I can do this.

Image

My current code

<form class="form-horizontal" role="form" name=fdadd method=post action=dsave.php> 
    <div class="form-group">
        <label for="DoctorName" class="col-sm-3 control-label">Doctor Name</label>
        <div class="col-sm-9">
            <input type="text" id="firstName" name=name placeholder="Doctor Name" class="form-control" autofocus>

        </div>
    </div>


    <div class="form-group">
        <label class="control-label col-sm-3">Gender</label>
        <div class="col-sm-6">
            <div class="row">
                <div class="col-sm-4">
                    <label class="radio-inline">
                        <input type="radio" name="radio" id="femaleRadio" value="Female">Female
                    </label>
                </div>
                <div class="col-sm-4">
                    <label class="radio-inline">
                        <input type="radio" name="radio" id="maleRadio" value="Male">Male
                    </label>
                </div>
                <div class="col-sm-4">
                    <label class="radio-inline">
                        <input type="radio" name="radio" id="uncknownRadio" value="Unknown">Unknown
                    </label>
                </div>
            </div>
        </div>
    </div> <!-- /.form-group -->

    <div class="form-group">
        <label for="Specilization" class="col-sm-3 control-label">Specilization</label>
        <div class="col-sm-9">
            <input type="text" id="spec" name=spec placeholder="Specilization" class="form-control" autofocus>

        </div>
    </div>

    <div class="form-group">
        <label for="designation" class="col-sm-3 control-label">Designation</label>
        <div class="col-sm-9">
            <input type="text" id="designation" name=desig placeholder="Designation" class="form-control" autofocus>

        </div>
    </div>

    <div class="form-group">
        <label for="fee" class="col-sm-3 control-label">Fee</label>
        <div class="col-sm-9">
            <input type="text" id="fee" name=fee placeholder="Fee" class="form-control" autofocus>

        </div>
    </div>

    <div class="form-group">
    <label for="checkbox1" class="col-sm-3 control-label">Available On</label>
    <div class="col-sm-9">
    <input type="checkbox" name="weekday" value="Mon">Mon
    <input type="checkbox" name="weekday" value="Tue">Tue
    <input type="checkbox" name="weekday" value="Wed">Wed
    <input type="checkbox" name="weekday" value="Thu">Thu 
    <input type="checkbox" name="weekday" value="Fri">Fri
    <input type="checkbox" name="weekday" value="Sat">Sat
    <input type="checkbox" name="weekday" value="Sun">Sun

    </div>
    </div>

    <div class="form-group">
        <label for="timef" class="col-sm-3 control-label">Available from</label>
        <div class="col-sm-9">
            <input type="time" id="timef" name=timef class="form-control">
        </div>
    </div>


    <div class="form-group">
        <label for="timet" class="col-sm-3 control-label">Available upto</label>
        <div class="col-sm-9">
            <input type="time" id="timet" name=timet class="form-control">
        </div>
    </div>


    <div class="form-group">
        <label for="email" class="col-sm-3 control-label">Email</label>
        <div class="col-sm-9">
            <input type="email" id="email" name=email placeholder="Email" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label for="phone" class="col-sm-3 control-label">Phone Number</label>
        <div class="col-sm-9">
            <input type="text" id="phone" name=phone placeholder="Phone Number" class="form-control">
        </div>
    </div>


    <div class="form-group">
      <label for="address"  class="col-sm-3 control-label">Address</label>
        <div class="col-sm-9">
            <textarea class="form-control" rows="3" id="address" name=address placeholder="Address"></textarea>
        </div>
    </div>

    <div class="form-group">
        <label for="city" class="col-sm-3 control-label">City</label>
        <div class="col-sm-9">
            <input type="text" id="city" name=city placeholder="City" class="form-control">
        </div>
    </div>

    <div class="form-group">
        <label for="state" class="col-sm-3 control-label">State</label>
        <div class="col-sm-9">
            <input type="text" id="state" name=state placeholder="State" class="form-control">
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-9 col-sm-offset-3">
            <button type="submit" value=submit class="btn btn-primary btn-block">Register</button>
        </div>
    </div>
</form>

I even tried cloning the time fields with

$(function()
{
    $(document).on('click', '.btn-add', function(e)
    {
        e.preventDefault();

        var controlForm = $('.controls form:first'),
            currentEntry = $(this).parents('.entry:first'),
            newEntry = $(currentEntry.clone()).appendTo(controlForm);

        newEntry.find('input').val('');
        controlForm.find('.entry:not(:last) .btn-add')
            .removeClass('btn-add').addClass('btn-remove')
            .removeClass('btn-success').addClass('btn-danger')
            .html('<span class="glyphicon glyphicon-minus"></span>');
    }).on('click', '.btn-remove', function(e)
    {
        $(this).parents('.entry:first').remove();

        e.preventDefault();
        return false;
    });
});