title: Handling post on dynamic row on a html table with jquery
body: <p>I have a dynamic table that I will be submitted to database.</p>
  
  <p>The html is looked like this :</p>
  
  <pre><code>&lt;form id="upload"&gt;
     &lt;div class="box-body"&gt;
        &lt;div class="row"&gt;
           &lt;div class="col-xs-12 col-md-12"&gt;
               &lt;div class="box-body table-responsive no-padding"&gt;
                    &lt;table class="table table-hover" id="tableReport"&gt;
                        &lt;thead&gt;
                          &lt;th&gt;TYPE&lt;/th&gt;
                          &lt;th&gt;ITEM&lt;/th&gt;
                          &lt;th&gt;DAMAGE&lt;/th&gt;
                          &lt;th&gt;REPAIR&lt;/th&gt;
                          &lt;th&gt;REMARKS&lt;/th&gt;
                          &lt;th&gt;MANHOUR&lt;/th&gt;
                          &lt;th&gt;&lt;button class="btn btn-block btn-primary" id="addRow" type="button"&gt;ADD&lt;/button&gt;&lt;/th&gt;
                        &lt;/thead&gt;
  
                        &lt;tbody&gt;
                           &lt;!--GENERATED BY JQUERY--&gt;
                        &lt;/tbody&gt;
                     &lt;/table&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;&lt;!-- /.box-body --&gt;
  
     &lt;div class="box-footer"&gt;
        &lt;button class="btn btn-info" type="submit"&gt;Upload&lt;/button&gt;
     &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>See, on my <code>&lt;th&gt;</code>, I have a button with id <code>addRow</code> that have a function to add a row on a last row.
  This is the code :</p>
  
  <pre><code>$(document).on('click', '#addRow', function () {
          var selType = '&lt;select class="form-control" name="type"&gt;';
          var selItem = '&lt;select class="form-control" name="item"&gt;';
          var selDamage = '&lt;select class="form-control" name="damage"&gt;';
          var selRepair = '&lt;select class="form-control" name="repair"&gt;';
          $.each(&lt;?php echo json_encode($type); ?&gt;, function (i, elem) {
              selType += '&lt;option&gt;' + elem.NAMA_TYPE + '&lt;/option&gt;';
          });
  
          $.each(&lt;?php echo json_encode($item); ?&gt;, function (i, elem) {
              selItem += '&lt;option&gt;' + elem.NAMA_ITEM + '&lt;/option&gt;';
          });
  
          $.each(&lt;?php echo json_encode($damage_codes); ?&gt;, function (i, elem) {
              selDamage += '&lt;option&gt;' + elem.NAMA_DAMAGE + '&lt;/option&gt;';
  
          });
  
          $.each(&lt;?php echo json_encode($repair_codes); ?&gt;, function (i, elem) {
              selRepair += '&lt;option&gt;' + elem.NAMA_REPAIR + '&lt;/option&gt;';
          });
  
          selType += '&lt;/select&gt;';
          selItem += '&lt;/select&gt;';
          selDamage += '&lt;/select&gt;';
          selRepair += '&lt;/select&gt;';
  
          $("#tableReport").find('tbody').append('&lt;tr&gt;&lt;td&gt;' + selType +
                  '&lt;/td&gt;&lt;td&gt;' + selItem +
                  '&lt;/td&gt;&lt;td&gt;' + selDamage +
                  '&lt;/td&gt;&lt;td&gt;' + selRepair +
                  '&lt;/td&gt;&lt;td&gt;&lt;input type="text" class="form-control name="remarks" placeholder="Describe it.."&gt;' +
                  '&lt;/td&gt;&lt;td&gt;&lt;input type="text" class="form-control time" name="manhour"&gt;' +
                  '&lt;/td&gt;&lt;td&gt;&lt;button class="btn btn-block btn-danger"&gt;Delete&lt;/button&gt;' +
                  '&lt;/td&gt;&lt;/tr&gt;');
          $(".time").inputmask("hh:mm");
  
      });
  </code></pre>
  
  <p>Now, this is the problem. How to handling the <code>form</code>. When <code>&lt;button class="btn btn-info" type="submit"&gt;Upload&lt;/button&gt;</code> is clicked to submit, I will handled it use jquery ajax. The code looked like this</p>
  
  <pre><code>$(document).on('submit', '#upload', function(){
    /*First, How to handled the dynamic row ?? */
    /* Commonly, I use var aVar = $('selector').val(); */
    /* Ex, I have two rows, How bout to handle two select option in different row ?*/
  
    $.ajax({
             url: 'LINK TO CHECK THE POST if has SUBMITTED',
             type: 'POST',
             data : {/*dynamic row that will be passed : data*/}
             dataType: 'json',
             success: function(obj) {   
         })
    return false;
  });
  </code></pre>
  
  <p>How can I handle that dynamic row, and how can I debug if the post have success ?</p>
  
  <p><strong>UPDATED</strong></p>
  
  <p>This code to check the condition of a ship container. If a container have many damage, it will be representated with one row as one damage. If the container have 3 damage, it will be have 3 rows. I want to submit it on a table in my database in tbl_damage_detail. I have plan to multiple insert. So, I Imagine to store that rows into an array. with foreach, I will be inserted them.</p>
  
  <p><a href="http://jsfiddle.net/f4jpdnjd/" rel="nofollow">JSFIDDLE</a> </p>