title: Dynamically add new rows and new sub rows using jquery
body: <p>I am looking for a functionality in my user interface:</p>
  
  <ol>
  <li>Add a new parent row (class="schedule") on <em>focusout</em> of the last column of the last parent row (class="schedule").</li>
  <li>And also add new child rows (class="from_hour_row", class="to_hour_row", class="mw_row") in the last 3 columns in the same parent row (class="schedule").</li>
  <li>Add new child rows (class="from_hour_row", class="to_hour_row", class="mw_row") in the last 3 columns in the same parent row (class="schedule") on <em>focusout</em> of the last child row (class="mw_row") of the last column without adding a new parent row if the current parent row is not the last one.</li>
  </ol>
  
  <p>However, with my code I am only able to add new child rows and a new parent row on <em>focusout</em> of the last child row of the last column of the first parent row. <em>Focusout</em> of the last column of new parent row doesn't trigger any event. Always, it is the last child row of the last column of the first parent row that adds new child rows in the first row and a new parent row.</p>
  
  <p>Attached a pic</p>
  
  <p><img src="https://i.stack.imgur.com/AIDSY.png" alt="form pic"></p>
  
  <p>Below is the html part</p>
  
  <pre><code>    &lt;table class="bordered2" style="width: 900px; margin-top: 5px;" align="center"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th class="cntr"&gt;
          From Date
        &lt;/th&gt;
        &lt;th class="cntr"&gt;
          To Date
        &lt;/th&gt;
        &lt;th class="cntr"&gt;
          From Hours
        &lt;/th&gt;
        &lt;th class="cntr"&gt;
          To Hours
        &lt;/th&gt;
        &lt;th class="cntr"&gt;
          MW
        &lt;/th&gt;
        &lt;th class="cntr"&gt;
          MW-Hours
        &lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody class="tbody"&gt;
      &lt;tr class="schedule"&gt;
        &lt;td&gt;
          &lt;input type="text" name="fromDate" class="fromDate" id="fromDate" /&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;input type="text" name="toDate" class="toDate" id="toDate" /&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;table class="from_hour" width="100%" cellspacing="0" cellpadding="0" bordercolor="#111111" border="0"&gt;
            &lt;tr class="from_hour_row"&gt;
              &lt;td&gt;
                &lt;input type="text" name="fromHour" class="fromHour" id="fromHour" size="10" /&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;table class="to_hour" width="100%" cellspacing="0" cellpadding="0" bordercolor="#111111" border="0"&gt;
            &lt;tr class="to_hour_row"&gt;
              &lt;td&gt;
                &lt;input type="text" name="toHour" class="toHour" id="toHour" size="10" /&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;table class="mw" width="100%" cellspacing="0" cellpadding="0" bordercolor="#111111" border="0"&gt;
            &lt;tr class="mw_row"&gt;
              &lt;td&gt;
                &lt;input type="text" name="mw" class="mw" id="mw" value="0.00" size="10" /&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;table class="mw_hr" width="100%" cellspacing="0" cellpadding="0" bordercolor="#111111" border="0"&gt;
            &lt;tr class="mw_hr_row"&gt;
              &lt;td&gt;
                &lt;input type="text" name="mwhrs" class="mwhrs" id="mwhrs" /&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="sumtr" id="sumtr"&gt;
        &lt;td id="sumtd" colspan="5"&gt;
          Total Mw-Hr : 
        &lt;/td&gt;
        &lt;td name="totalmwhrs" class="totalmwhrs" id="totalmwhrs"&gt;
          0
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Below is the jquery part</p>
  
  <pre><code>    $('table.mw').on('focusout', 'tr.mw_row:last td input',function(){
          $(this).parent().parent().parent().parent().parent().parent().find('table.from_hour tr.from_hour_row').last().after('&lt;tr class="from_hour_row"&gt;&lt;td&gt;&lt;input type="text" name="fromHour" class="fromHour" id="fromHour" size="10"/&gt;&lt;/td&gt;&lt;/tr&gt;');
          $(this).parent().parent().parent().parent().parent().parent().find('table.to_hour tr.to_hour_row').last().after('&lt;tr class="to_hour_row"&gt;&lt;td&gt;&lt;input type="text" name="toHour" class="toHour" id="toHour" size="10"/&gt;&lt;/td&gt;&lt;/tr&gt;');
          $(this).parent().parent().parent().parent().parent().parent().find('table.mw tr.mw_row').last().after('&lt;tr class="mw_row"&gt;&lt;td&gt;&lt;input type="text" name="mw" class="mw" id="mw" value="0.00" size="10"/&gt;&lt;/td&gt;&lt;/tr&gt;');
          $(this).parent().parent().parent().parent().parent().parent().find('table.mw_hr tr.mw_hr_row').last().after('&lt;tr class="mw_hr_row"&gt;&lt;td&gt;&lt;input type="text" name="mwhrs" class="mwhrs" id="mwhrs" value="0.00" size="10"/&gt;&lt;/td&gt;&lt;/tr&gt;');
      });
  
      $('table.mw:last').on('focusout', 'tr.mw_row:last td input',function(){
                      $(this).parent().parent().parent().parent().parent().parent().parent().find('tr.schedule').last().after('&lt;tr class="schedule"&gt;&lt;td&gt;&lt;input type="text" name="fromDate" class="fromDate"/&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="toDate" class="toDate"/&gt;&lt;/td&gt;&lt;td&gt;&lt;table class="from_hour" width="100%" cellspacing="0" cellpadding="0" bordercolor="#111111" border="0"&gt;&lt;tr class="from_hour_row"&gt;&lt;td&gt;&lt;input type="text" name="fromHour" class="fromHour" size="10"/&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;&lt;td&gt;&lt;table class="to_hour" width="100%" cellspacing="0" cellpadding="0" bordercolor="#111111" border="0"&gt;&lt;tr class="to_hour_row"&gt;&lt;td&gt;&lt;input type="text" name="toHour" class="toHour" size="10" /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;&lt;td&gt;&lt;table class="mw" width="100%" cellspacing="0" cellpadding="0" bordercolor="#111111" border="0"&gt;&lt;tr class="mw_row"&gt;&lt;td&gt;&lt;input type="text" name="mw" class="mw" value="0.00" size="10"/&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;&lt;td&gt;&lt;table class="mw_hr" width="100%" cellspacing="0" cellpadding="0" bordercolor="#111111" border="0"&gt;&lt;tr class="mw_hr_row"&gt;&lt;td&gt;&lt;input type="text" name="mwhrs" class="mwhrs" /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;');
      });
  </code></pre>