I have a dynamic table that I will be submitted to database.

The html is looked like this :

<form id="upload">
   <div class="box-body">
      <div class="row">
         <div class="col-xs-12 col-md-12">
             <div class="box-body table-responsive no-padding">
                  <table class="table table-hover" id="tableReport">
                      <thead>
                        <th>TYPE</th>
                        <th>ITEM</th>
                        <th>DAMAGE</th>
                        <th>REPAIR</th>
                        <th>REMARKS</th>
                        <th>MANHOUR</th>
                        <th><button class="btn btn-block btn-primary" id="addRow" type="button">ADD</button></th>
                      </thead>

                      <tbody>
                         <!--GENERATED BY JQUERY-->
                      </tbody>
                   </table>
                </div>
              </div>
            </div>
          </div><!-- /.box-body -->

   <div class="box-footer">
      <button class="btn btn-info" type="submit">Upload</button>
   </div>
</form>

See, on my <th>, I have a button with id addRow that have a function to add a row on a last row. This is the code :

$(document).on('click', '#addRow', function () {
        var selType = '<select class="form-control" name="type">';
        var selItem = '<select class="form-control" name="item">';
        var selDamage = '<select class="form-control" name="damage">';
        var selRepair = '<select class="form-control" name="repair">';
        $.each(<?php echo json_encode($type); ?>, function (i, elem) {
            selType += '<option>' + elem.NAMA_TYPE + '</option>';
        });

        $.each(<?php echo json_encode($item); ?>, function (i, elem) {
            selItem += '<option>' + elem.NAMA_ITEM + '</option>';
        });

        $.each(<?php echo json_encode($damage_codes); ?>, function (i, elem) {
            selDamage += '<option>' + elem.NAMA_DAMAGE + '</option>';

        });

        $.each(<?php echo json_encode($repair_codes); ?>, function (i, elem) {
            selRepair += '<option>' + elem.NAMA_REPAIR + '</option>';
        });

        selType += '</select>';
        selItem += '</select>';
        selDamage += '</select>';
        selRepair += '</select>';

        $("#tableReport").find('tbody').append('<tr><td>' + selType +
                '</td><td>' + selItem +
                '</td><td>' + selDamage +
                '</td><td>' + selRepair +
                '</td><td><input type="text" class="form-control name="remarks" placeholder="Describe it..">' +
                '</td><td><input type="text" class="form-control time" name="manhour">' +
                '</td><td><button class="btn btn-block btn-danger">Delete</button>' +
                '</td></tr>');
        $(".time").inputmask("hh:mm");

    });

Now, this is the problem. How to handling the form. When <button class="btn btn-info" type="submit">Upload</button> is clicked to submit, I will handled it use jquery ajax. The code looked like this

$(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;
});

How can I handle that dynamic row, and how can I debug if the post have success ?

UPDATED

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.

JSFIDDLE

If the inputs are added correctly to the form you just need to submit the form with AJAX, no need for anything special, one way is to use the jQuery serialize() method like this.

$(document).on('submit', '#upload', function(event){
  $.ajax({
           url: 'LINK TO CHECK THE POST if has SUBMITTED',
           type: 'POST',
           data : $(this).serialize(),
           dataType: 'json',
           success: function(obj) {
       })
  event.preventDefault();
});

more