<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="http://www.a1b5.net/metro/assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet" type="text/css" /> <link href="http://www.a1b5.net/metro/assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" /> <script src="http://www.a1b5.net/metro/assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js" type="text/javascript"></script> <script src="http://www.a1b5.net/metro/assets/pages/scripts/components-date-time-pickers.min.js" type="text/javascript"></script> <div class="form-horizontal"> <div class="form-body"> <!-- Begin cloned dynamic list section --> <div id="date1" class="clonedInput_4"> <div class="form-group"> <label class="control-label col-md-3 label_date">Date</label> <div class="col-md-3 fields"> <div id="name_data"> <div class="input-group"> <input class="form-control form-control-inline input-medium date-picker" id="datepicker" name="name[0][date]"> </div> </div> <span class="help-block">Choose a date </span> </div> </div> </div><!-- end #date1 --> <div class="form-group"> <label class="control-label col-md-3"></label> <div class="col-md-4"> <button type="button" id="btnAdd_4" name="btnAdd_4" class="btn btn-primary">Add new date</button> <button type="button" id="btnDel_4" name="btnDel_4" class="btn btn-danger">Remove last one</button> </div> </div> </div> </div>

$(function () { $('#btnAdd_4').click(function () { var num = $('.clonedInput_4').length, // Checks to see how many "duplicatable" input fields we currently have newNum = new Number(num + 1), // The numeric ID of the new input field being added, increasing by 1 each time newElem = $('#date' + num).clone().attr('id', 'date' + newNum).fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value /* This is where we manipulate the name/id values of the input inside the new, cloned element Below are examples of what forms elements you can clone, but not the only ones. There are 2 basic structures below: one for an H2, and one for form elements. To make more, you can copy the one for form elements and simply update the classes for its label and input. Keep in mind that the .val() method is what clears the element when it gets cloned. Radio and checkboxes need .val([]) instead of .val(''). */ // H2 - section newElem.find('.label_date').attr('id', 'ID' + newNum + '_reference').attr('name', 'ID' + newNum + '_reference').html('Date #' + newNum); // date - text newElem.find('.label_date').attr('for', 'ID' + newNum + '_date_number'); newElem.find('.input_date').attr('id', 'ID' + newNum + '_date_number').attr('name', 'ID' + newNum + '_date_number').val(''); // Insert the new element after the last "duplicatable" input field $('#date' + num).after(newElem); $('#ID' + newNum + '_title').focus(); // Enable the "remove" button. This only shows once you have a duplicated section. $('#btnDel_4').attr('disabled', false); // Right now you can only add 4 sections, for a total of 5. Change '5' below to the max number of sections you want to allow. // This first if statement is for forms using input type="button" (see older demo). DELETE if using button element. if (newNum == 5) $('#btnAdd_4').attr('disabled', true).prop('value', "You've reached the limit"); // value here updates the text in the 'add' button when the limit is reached // This second if statement is for forms using the new button tag (see Bootstrap demo). DELETE if using input type="button" element. if (newNum == 5) $('#btnAdd_4').attr('disabled', true).text("You've reached the limit"); // value here updates the text in the 'add' button when the limit is reached }); $('#btnDel_4').click(function () { // Confirmation dialog box. Works on all desktop browsers and idate. if (confirm("Are you sure you wish to remove this date number? This cannot be undone.")) { var num = $('.clonedInput_4').length; // how many "duplicatable" input fields we currently have $('#date' + num).slideUp('slow', function () {$(this).remove(); // if only one element remains, disable the "remove" button if (num -1 === 1) $('#btnDel_4').attr('disabled', true); // enable the "add" button. IMPORTANT: only for forms using input type="button" (see older demo). DELETE if using button element. $('#btnAdd_4').attr('disabled', false).prop('value', "Add date"); // enable the "add" button. IMPORTANT: only for forms using the new button tag (see Bootstrap demo). DELETE if using input type="button" element. $('#btnAdd_4').attr('disabled', false).text("Add date");}); } return false; // Removes the last section you added }); // Enable the "add" button $('#btnAdd_4').attr('disabled', false); // Disable the "remove" button $('#btnDel_4').attr('disabled', true); });