Get child from children jquery

I need to create the following form dynamically using jquery.

<form>
        <div class="col-xs-12">
            <div class="col-xs-3">
               <label for="startTime">Start Time</label>
                <input id="startTime" name="startTime" style="margin-bottom: 10px" class="form-control" type="text">
             </div>
             <div class="col-xs-3">
                <label for="endTime">End Time</label>
                <input id="endTime" name="endTime" style="margin-bottom: 10px" class="form-control" type="text">
              </div>
      </div>
</form>

This is how I tried it.

 $('#addBodyContainer').append('<form id = "addDataForm" ></form>');
      var form = $('#addBodyContainer').children();
      form.append('<div class = "col-xs-12" ></div>');

var col12Time = form.children();
col12Time.append('<div class = "col-xs-3" ></div>');
var col3StartTime = col12Time.children();
col3StartTime.append(
      "<label for=\"startTime\">"+head[0]+"</label>" +
      "<input id=\"startTime\" name=\"startTime\" style=\"margin-bottom: 10px\" class=\"form-control\" type=\"text\" />"
            );
var col12Time2 = form.children();
col12Time.append('<div class = "col-xs-3" ></div>');
var col3EndTime = col12Time.children();
col3EndTime.append(
       "<label for=\"endTime\">"+head[1]+"</label>" +
       "<input id=\"endTime\" name=\"endTime\" style=\"margin-bottom: 10px\" class=\"form-control\" type=\"text\">"
            );

When I'm creating the end time field. It appears twice in the form. I think the problem occurs with I call form.children() twice. How can I solve this issue?

Answers


You are appending it to all children, you would need to select the last one.

var col12Time = form.children().last();

You can create it like this

var container = $('#addBodyContainer');
var tmp='<form>'+
    '<div class="col-xs-12">'+
    '<div class="col-xs-3">'+
    '<label for="startTime">Start Time</label>'+
    '<input id="startTime" name="startTime" style="margin-bottom: 10px" class="form-control" type="text"/>'+
    '</div>'+
    '<div class="col-xs-3">'+
    '<label for="endTime">End Time</label>'+
    '<input id="endTime" name="endTime" style="margin-bottom: 10px" class="form-control" type="text"/>'+
    '</div>'+
    '</div>'+
    '</form>';
container.append(tmp);

Need Your Help

Updating a cached user control in asp.net

asp.net user-controls fragment-caching

i have a user control on my page to show the profile picture of logged in user. I have cached this user control using &lt;%@ OutputCache Duration="120" VaryByParam="none" %&gt;.

How to track and display user's location on a map

android google-maps google-maps-android-api-2

The title pretty much covers it. I want to use the phone's GPS to track the user's location and display a marker on the map at their location. I want this marker to be almost constantly updating ...