title: Subtracting Date and Time from dynamically created datepicker fields
body: <p>I have 3 dynamically created fields via clone() in jQuery and wish to subtract hours from an overall number of available hours. To help me explain, consider this image:</p>
  
  <p><a href="https://i.stack.imgur.com/TYJdI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TYJdI.png" alt="enter image description here"></a></p>
  
  <p>The first date is set dynamically (but can be changed). On the top right we have the total available hours. What I need is to calculate the hours set in the fields bellow (all created dynamically, more can be added or eliminated) and subtract from the available hours. I also need to consider that each time period does not overlap the last. Eg, When setting the next date, it can not be equal to the one above as the time interval match.</p>
  
  <p>Here is my HTML code:</p>
  
  <pre><code>&lt;table id="days" class="table table-hover"&gt;
      &lt;thead&gt;
          &lt;tr&gt;&lt;th&gt;Dia&lt;/th&gt;&lt;th&gt;Hora Início&lt;/th&gt;&lt;th&gt;Hora Término&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
         &lt;tr id="days0" class="hidden" data-id="0" &gt;&lt;td data-name="day"&gt;&lt;input type="text" name="day0" class="input-block-level datepicker-days"&gt; &lt;/td&gt;&lt;td data-name="start"&gt;&lt;input type="time" name="start0"&gt;&lt;/td&gt;&lt;td data-name="end"&gt;&lt;input type="time" name="end0"&gt;&lt;/td&gt;&lt;td data-name="del"&gt;&lt;button type="button" name="del0" class="btn btn-xs btn-danger row-remove"&gt;&lt;icon class="fa fa-remove"&gt;&lt;/icon&gt;&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;button type="button" class="btn btn-xs" id="add_row"&gt;&lt;i class="icon fa fa-plus"&gt;&lt;/i&gt;&lt;/button&gt;
  </code></pre>
  
  <p>And my JQuery so far:</p>
  
  <pre><code>$("#add_row").on("click", function() {
      var newid = 0;
      $.each($("#days tr"), function() {
          if (parseInt($(this).data("id")) &gt; newid) {
              newid = parseInt($(this).data("id"));
          }
      });
      newid++;
  
      var tr = $("&lt;tr&gt;&lt;/tr&gt;", {
          id: "days"+newid,
          "data-id": newid
      });
  
      $.each($("#days tbody tr:nth(0) td"), function() {
          var cur_td = $(this);
          var children = cur_td.children();
          console.log($(this).data("name"));
          // add new td and element if it has a nane
          if ($(this).data("name") != undefined) {
              var td = $("&lt;td&gt;&lt;/td&gt;", {
                  "data-name": $(cur_td).data("name")
              });
              console.log(children);
              $.each(children, function(index, childElement){
               var c = $(childElement).clone();
              c.attr("name", $(cur_td).data("name") + newid);
                  if(c.attr("type")=='text'){
                      c.attr("class", "datepicker-days");
                  }
  
                  if(c.attr("name")=='start'+newid){
                      c.attr("value", "09:00");
                  }
  
                  if(c.attr("name")=='end'+newid){
                      c.attr("value", "18:00");
                  }
              c.appendTo($(td));
              });
  
              td.appendTo($(tr));
          } else {
              var td = $("&lt;td&gt;&lt;/td&gt;", {
                  'text': $('#days tr').length
              }).appendTo($(tr));
          }
      });
  
      // add the new row
      $(tr).appendTo($('#days'));
  
      if(newid==1){
          // If is first clone, set Date and remove datepicker class
          $("input[name=day1]").prop('readonly', true);
           $("input[name=day1]").val($("input[name=data_inicio]").val());
  
          $("input[name=day1]").removeClass("datepicker-days");
          $("input[name=start1]").val('09:00');
          $("input[name=end1]").val('18:00');
      }
  
  
      $(tr).find("td button.row-remove").on("click", function() {
           $(this).closest("tr").remove();
      });
  </code></pre>
  
  <p>For this stage forward I am quite lost.
  I know the logic but don't know how to get there.
  I am sorry if I haven't made myself clear. Thank you.</p>