template

var templateFragmentKeyFrame = function() {

        var dfg = document.createDocumentFragment();
        var div_columns = document.createElement("div");
        div_columns.className = "col-md-4";

        // create input tag name
        var input_tagname  = document.createElement("input");
        input_tagname.className   = "time_tag_name form-control";
        input_tagname.placeholder = "title for this time";

        // create input timeline
        var input_timeline = document.createElement("input");
        input_timeline.className = "timeline form-control";
        input_timeline.placeholder = "date of launch event";
        var icon_datetime_wrap = document.createElement('span');
        icon_datetime_wrap.className = "input-group-addon";

        var icon_datetime = document.createElement('span');
        icon_datetime.className = "glyphicon glyphicon-calendar";
        icon_datetime_wrap.appendChild(icon_datetime);
        input_timeline.appendChild(icon_datetime_wrap);

        $(input_timeline).datetimepicker({
                            widgetPositioning:{'horizontal':'left'},
                            format : "YYYY-MM-DD H:mm:ss",
                            sideBySide : true
                        });

        var div_tagname  = div_columns.cloneNode(false);
        div_tagname.appendChild(input_tagname);
         //.clone();
        var div_timeline = div_columns.cloneNode(false);
        div_timeline.appendChild(input_timeline);

        var div_row = document.createElement("div");
        div_row.className = "row";



        div_row.appendChild(div_tagname);
        div_row.appendChild(div_timeline);
        //div_row.appendChild(div_admin_controls);

        dfg.appendChild(div_row);
        document.getElementById("keyframe-list2").appendChild(dfg);

    }