Entrada dinámica del selector de reloj Bootstrap

En referencia al siguiente código de arranque, estoy tratando de implementar una entrada dinámica para el selector de reloj, aquí he usado un wrapper.append () para implementar el cuadro de texto del selector de reloj y otros 2 cuadros de texto con solo hacer clic en un botón (agregar).

<div  style="height:70px;"></div>
    <div class="container-fluid" >
            <form role="form" name="frm" class="col-xs-12" action ="timeslot" method="post" 
            onSubmit="return valid2()">

            <div class="form-group">
                    <label for="name" >Slot Name</label>
                    <input type="text" name="slotname" class="form-control col-xs-6" placeholder="Time Slot name" >
             </div>
                <div  style="height:30px;"></div>
             <div class="form-group row">
             <div class="col-xs-6">
                    <label for="name" >Time Slot</label>
                    <input type="text" name="timeslot1" class="form-control col-xs-6" placeholder="Time Slot name" >
             </div> 
             <div class="col-xs-6">
                    <label for="name">Slot Available</label>
                    <input type="text" name="slotavailable1" class="form-control" placeholder="Slot available" >
             </div>
             </div>

             <label for="name" >Time</label>
            <div class=" form-group row">
                <div class="form-group clockpicker col-xs-6" data-placement="left" data-align="top" data-autoclose="true" >
                    <input type="text" id="start_time1" name="start_time1" class="form-control" value="09:30">
                    <span class="form-group-addon">
                        <span class="glyphicon glyphicon-time "></span>
                    </span>
                </div>

                <div class="form-group  clockpicker col-xs-6" data-placement="left" data-align="top" data-autoclose="true" >
                    <input type="text" id="end_time1" name="end_time1" class="form-control" value="09:30">
                    <span class="form-group-addon">
                        <span class="glyphicon glyphicon-time"></span>
                    </span>
                </div>
            </div>

            <div class="input_fields_wrap form-group">
                <button class="add_field_button btn btn-info">Add</button>
            </div>
            <div  style="height:30px;"></div>
            <div class="form-group">
                    <button type="submit" id="submit" class="btn btn-info" onkeyup="count(this.value)" name="submit">SUBMIT</button>
            </div>
        </div>
            </form>

            <script type="text/javascript">
            jQuery(function($) {
                $('.clockpicker').clockpicker({
                    placement: 'top',
                    align: 'left',
                    donetext: 'Done'
                });
        // The line below "closes" the document ready function
        });
            </script>
            <script>
            $(document).ready(function() {
                var max_fields      = 15; //maximum input boxes allowed
                var wrapper         = $(".input_fields_wrap"); //Fields wrapper
                var add_button      = $(".add_field_button"); //Add button ID

                var x = 2; //initlal text box count
                $(add_button).click(function(e){ //on add input button click
                    e.preventDefault();
                    if(x < max_fields){ //max input box allowed
                        x++; //text box increment
                        $(wrapper).append('<div> <div  style="height:30px;"></div>'+
                                '<div class="form-group row">'+
                        '<div class="col-xs-6">'+
                          '<label for="name"+x >Time Slot</label>'+
                          '<input type="text" name="timeslot"+x class="form-control col-xs-6" placeholder="Time Slot name" ></div>'+
                         '<div class="col-xs-6">'+
                            '<label for="name"+x>Slot Available</label>'+
                            '<input type="text" name="slotavailable"+x class="form-control" placeholder="Slot available" >'+
                         '</div>'+
                         '</div>'+

                         '<label for="name"+x >Time</label>'+
                         '<div class=" form-group row">'+
                         '<div class="form-group clockpicker col-xs-6" data-placement="left" data-align="top" data-autoclose="true" >'+
                             '<input type="text" id="start_time"+x name="start_time"+x class="form-control" value="09:30">'+
                             '<span class="form-group-addon">'+
                                '<span class="glyphicon glyphicon-time "></span>'+
                             '</span>'+
                            '</div>'+

                            '<div class="form-group  clockpicker col-xs-6" data-placement="left" data-align="top" data-autoclose="true" >'+
                                '<input type="text" id="end_time"+x name="end_time"+x class="form-control" value="09:30">'+
                                '<span class="form-group-addon">'+
                                    '<span class="glyphicon glyphicon-time"></span>'+
                                '</span>'+
                            '</div>'+
                            '</div>'+

                        '<a href="#" class="remove_field">Remove</a></div>'); //add input box
                          }
                });

                $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
                    e.preventDefault(); $(this).parent('div').remove(); x--;
                })
            });
            </script>

PD: perdón por el largo código. Gracias a @cale_b por ayudarme con mi publicación anterior.

Respuestas a la pregunta(1)

Su respuesta a la pregunta