Clone a HTML element with jquery clone()

    function add_row($table){
        var $last_row = $table.find('tr:last');

        //select2 has to be destroyed before clone()
        $last_row.find("select.select2").select2("destroy");
        $last_row.find("select.select2").removeAttr('data-select2-id');
        $last_row.find("select.select2 option").removeAttr('data-select2-id');

        var $clone = $last_row.clone();

        //console.log($clone[0]);
        $clone.find(".datetimepicker")
            .removeAttr('id')
            .removeClass('hasDatepicker')
            .unbind();

        $clone.find('.datetimepicker').datetimepicker({
            dateFormat: 'yy-mm-dd',
            controlType: 'select',
            timeFormat: 'HH:mm:ss'
        });

        $clone.find("select.select2")
            .removeAttr('id')
            .removeAttr('data-select2-id');

        var $last_cell = $clone.find('td:last');
        if($last_cell.children().length == 0){
            $last_cell.append('<button type="button" class="delete_row" name="delete_row">刪除</button>');
        }

        $table.find('tbody').append($clone);

        $table.find("select.select2").select2({
            tags: true,
        });
    }

Reference:

  1. https://stackoverflow.com/questions/32637674/jquery-clone-date-picker-not-working