Отображение данных выборки в динамических полях

Я генерирую эти динамические поля с помощью Jquery и сохраняю их данные в формате JSON для записи счета, и я хочу отобразить сохраненные данные обратно в эти поля после извлечения из базы данных для процесса обновления. Пожалуйста, помогите, как я могу это сделать?

ПОСМОТРЕТЬ:

<div class = "row">
      <div class = "col-sm-12 table-responsive">
        <div class = "box-tools">
              <button class = "btn btn-xs btn-primary tableaction" data-action = "add"><i class = "fa fa-fw fa-plus"></i> Add More Items</button>
              <button class = "btn btn-xs btn-danger tableaction" data-action = "remove"><i class = "fa fa-fw fa-minus"></i> Remove Last One</button>
            </div>
        <table class = "table table-striped">
          <thead>
          <tr>
            <th>Sr.#</th>
            <th>ITEM DESCRIPTION</th>
            <th>HSN/SAC Code</th>
            <th>Unit</th>
            <th>Qty</th>
            <th>Rate</th>
            <th>Amount</th>
          </tr>
          </thead>
          <tbody class = "invoiceitems">
            <tr class = "invoiceitemdetail">
              <td class = "sno">1</td> 
              <td><?=form_input(array('name' => 'itemdesc[]','id' => 'itemdesc','type' => 'text','class' => 'form-control','placeholder' => 'Enter detail','value' => set_value('itemdesc[]')))?></td>
              <td><?=form_input(array('name' => 'saccode[]','id' => 'saccode[]','type' => 'text','class' => 'form-control','placeholder' => 'Enter SAC Code','value' => set_value('saccode[]')))?></td>
              <td><?=form_input(array('name' => 'units[]','id' => 'units[]','type' => 'text','class' => 'form-control inputcalqty','placeholder' => 'Enter Quantity','value' => set_value('units[]')))?></td>
              <td><?=form_input(array('name' => 'quantities[]','id' => 'quantities[]','type' => 'text','class' => 'form-control inputcalunit','placeholder' => 'Enter Units','value' => set_value('quantities[]')))?></td>
              <td><?=form_input(array('name' => 'rates[]','id' => 'rates[]','type' => 'text','class' => 'form-control inputcalprice','placeholder' => 'Enter Price','value' => set_value('rates[]')))?></td>
              <td><?=form_input(array('name' => 'amount[]','id' => 'amount[]','type' => 'text','class' => 'form-control inputtotalamount','placeholder' => 'Total Amount','value' => set_value('amount[]')))?></td>
            </tr>
          </tbody>
        </table>
      </div>
</div>

JQuery:

<script>
        $('button[data-action = "remove"]').hide();
        $('#invoicecreation').on('click','.tableaction',function(e){
          e.preventDefault();
          //console.info(appendctrl);
          $('button[data-action = "remove"]').show();
          var dataact= $(this).data('action');
          var totaltablerecords = $('.invoiceitemdetail').length;
          var appendctrl = $('.invoiceitemdetail').eq(0).clone().find("input").val("").end();
          if (dataact === 'add'){
            $(appendctrl).appendTo('.invoiceitems');  
          }else if (dataact === 'remove'){
            if (totaltablerecords > 1){
              $('.invoiceitemdetail:last-child').remove();
              if ($('.invoiceitemdetail').length ==1){
                $('button[data-action = "remove"]').hide();
              }
            }else{
              $('button[data-action = "remove"]').hide();
            }
          }
          $("td.sno").each(function(index,element){                 
            $(element).text(index + 1); 
          });

        });
</script>