Jquery - Add and remove fields dynamically - How to do it without repeating code?

Question

I am implementing a "JQuery add/remove input fields" solution: I need to use some JQuery plugins to make everything work. For example I use a Datepicker, SelectPicker and Autosize.. So, for the markup that's already there (without the ADD functionality) this code works:

$(document).ready(function() {
    $('.autosize').autosize();      
    $('input, textarea').placeholder();
    $('.datetimepickaa').datetimepicker({
        pickTime: false
    });
    $('.selectpicker').selectpicker();

    // Remove the specific row
    $("button.removee").click(function(){
        $(this).closest(".conteiner").remove();
    });
});

The problem is that when I try to add the ADD functionality, the jquery plugins don't work for the new elements, so I have to repeat the calls inside the add code to make it work:

$(document).ready(function() {

    $('.autosize').autosize();      
    $('input, textarea').placeholder();
    $('.datetimepickaa').datetimepicker({
        pickTime: false
    });
    $('.selectpicker').selectpicker();

    // Remove the specific row
    $("button.removee").click(function(){
        $(this).closest(".conteiner").remove();
    });

    // ADD FUNCTIONALITY
    $("#add").click(function() {

        var row = '\
               <div class="form-group conteiner">\
                   <div class="row">\
                       <div class="col-md-2">\
                           <label for="date">Date:</label>\
                           <div class="input-group date datetimepickaa"  id="datetimepickerloop" data-date-format="YYYY/MM/DD">\
                               <input type="text" class="form-control datetimepickaa" placeholder="Enter the date..." data-date-format="YYYY/MM/DD" />\
                               <span class="input-group-addon">\
                                   <span class="glyphicon glyphicon-calendar"></span>\
                               </span>\
                           </div>\
                       </div>\
                       <div class="col-md-9">\
                           <label for="notes">Notes:</label>\
                           <textarea class="form-control autosize" id="" name=""></textarea>\
                       </div>\
                       <div style="" class="col-md-1">\
                           <button type="button" class="removee btn btn-primary btn-md pull-right" style="margin-top:25px">\
                               <span class="glyphicon glyphicon-remove"></span> Delete\
                           </button>\
                       </div>\
                   </div>\
               </div>';

        $("#wrapper").append(row);

        // REPETITION OF THE CODE ABOVE!!!!!!   //////////////////////////////
        $('.autosize').autosize();      
        $('input, textarea').placeholder();
        $('.datetimepickaa').datetimepicker({
            pickTime: false
        });
        $('.selectpicker').selectpicker();

        // Remove the specific row
        $("button.removee").click(function(){
            $(this).closest(".conteiner").remove();
        }); 

    });

});

Do you have any clue on how to do that the best way without repeting any code?

Thank's in advance!!

Answer 1

Extract them into a function and call that function?

function initializeThings()
{
$('.autosize').autosize();      
    $('input, textarea').placeholder();
    $('.datetimepickaa').datetimepicker({
        pickTime: false
    });
    $('.selectpicker').selectpicker();
 // Remove the specific row
    $("button.removee").click(function(){
        $(this).closest(".conteiner").remove();
    });
}

$(document).ready(function() {

initializeThings();



// ADD FUNCTIONALITY
$("#add").click(function() {

    var row = '\
           <div class="form-group conteiner">\
               <div class="row">\
                   <div class="col-md-2">\
                       <label for="date">Date:</label>\
                       <div class="input-group date datetimepickaa"  id="datetimepickerloop" data-date-format="YYYY/MM/DD">\
                           <input type="text" class="form-control datetimepickaa" placeholder="Enter the date..." data-date-format="YYYY/MM/DD" />\
                           <span class="input-group-addon">\
                               <span class="glyphicon glyphicon-calendar"></span>\
                           </span>\
                       </div>\
                   </div>\
                   <div class="col-md-9">\
                       <label for="notes">Notes:</label>\
                       <textarea class="form-control autosize" id="" name=""></textarea>\
                   </div>\
                   <div style="" class="col-md-1">\
                       <button type="button" class="removee btn btn-primary btn-md pull-right" style="margin-top:25px">\
                           <span class="glyphicon glyphicon-remove"></span> Delete\
                       </button>\
                   </div>\
               </div>\
           </div>';

    $("#wrapper").append(row);

    initializeThings();

});