How to change value inside input box that generated by jQuery?

Question

please help me resolved this problem, I have an input value (weight) that generated by jQuery, I know it won't change it's value because of looping in my code, but is there another way to do this ? The goal is I want to autogenerate the weight input value, but I can change it too.

if the snippet don't work, here's the link : https://jsfiddle.net/s3grkqxm/

Thank you for your help.

var numRows = 2, ti = 5;

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

function recalc() {
  var berat = 0;
  var qty = 0;
  var grandtotal = 0;
  var grandtotalbtg = 0;
  $('#kas_table').find('tr').each(function() {
    var berat = $(this).find('input.berat').val();
    var qty = $(this).find('input.qty').val();
    var subtotal = (berat * qty);
    let berat_max = $(this).find('option:selected').data('berat');
    $(this).find('input.subtotal').val(Math.round(subtotal * 100) / 100);
    $(this).find('input.berat').val(berat_max).text();
  });
}

$(function() {
  $('div.table-responsive').on("keyup change blur", recalc);
});



var i=0;
$('#add_new').click(function(){
  i++;
  $('#mainbody').append('<tr><td>' +
    '<select class="form-control nama" name="addmore['+i+'][nama]" id="nama'+i+'" required >' +
    '<option disabled="disabled" selected="selected" value="" >Select Produk</option>' +
  '<option value="1" data-berat="100">Item 1</option>' +
    '<option value="1" data-berat="170">Item 2</option>' +
    '</select></td>' +
    '<td><input class="form-control qty" type="number" name="addmore['+i+'][qty]" id="qty'+i+'" required ></td>' +
    '<td><input step=".001" class="form-control berat" type="number" name="addmore['+i+'][berat]" id="berat'+i+'" required ></td>' +
    '<td><input class="form-control subtotal" type="number" name="addmore['+i+'][subtotal]" id="subtotal'+i+'" required readonly></td>'
  )
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive">
  <table class="table-bordered" width="100%" id="kas_table">
    <thead>
      <tr>
        <th width="40%">Name</th>
        <th width="10%">Qty</th>
        <th width="10%">Weight</th>
        <th>Subtotal KG</th>
        <th>
          <button id="add_new" type="button" name="add_new" class="btn btn-sm btn-success"> +</button>
        </th>
      </tr>
    </thead>
    <tbody id="mainbody">
      <tr>
        <td><select class="form-control nama" name="addmore[0][nama]" id="nama0" required >
        <option disabled="disabled" selected="selected" value="" >Select Produk</option>
        <option value="1" data-berat="100">Item 1</option>
        <option value="2" data-berat="170">Item 2</option>
        </select></td>
        <td><input class="form-control qty" type="number" name="addmore[0][qty]" id=qty0 required></td>
        <td><input step=".001" class="form-control berat" type="number" name="addmore[0][berat]" id="berat0" required></td>
        <td><input class="form-control subtotal" type="number" name="addmore[0][subtotal]" id="subtotal0" readonly></td>
      </tr>
  </tbody>
  </table>               
</div>

Answer 1

the reason when you change Weight it back to the original value is because you refresh the whole table including the drop-down that's why it set back the value which must be set after the dropdown change.$('div.table-responsive').on("keyup change blur", recalc); due this.

you just need to separate each element change event to get the proper results. I set the value in Weight on the change dropdown by adding this

$(document).on('change', 'select', function() {
        $('#kas_table').find('tr').each(function() {
            let berat_max = $(this).find('option:selected').data('berat');
            $(this).find('input.berat').val(berat_max).text();
        });
    });

and separately call qty and weight using this

$('.qty').on("keyup change blur", recalc);
$('.berat').on("keyup change blur", recalc);

finally here is your updated code working as expected hope it will helpful for you.

<!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
       <script>   
           var numRows = 2, ti = 5;
           function isNumber(n) {
               return !isNaN(parseFloat(n)) && isFinite(n);
           }

           function recalc() {
               var berat = 0;
               var qty = 0;
               var grandtotal = 0;
               var grandtotalbtg = 0;
               $('#kas_table').find('tr').each(function() {
                   var berat = $(this).find('input.berat').val();
                   var qty = $(this).find('input.qty').val();
                   var subtotal = (berat * qty);
                   $(this).find('input.subtotal').val(Math.round(subtotal * 100) / 100);
   
               });
           }
           function selectProduct(e)
           {

               let berat_max = $(e).find('option:selected').data('berat');
               $(e).parent().parent().find('input.berat').val(berat_max).text();
               var berat =   $(e).parent().parent().find('input.berat').val();
               var qty =  $(e).parent().parent().find('input.qty').val();
               var subtotal = (berat * qty);
               $(e).parent().parent().find('input.subtotal').val(Math.round(subtotal * 100) / 100);
                 
           }
           $(function() {
               $(document).on('change', 'select', function() {
               
                   $('.qty').on("keyup change blur", recalc);
                   $('.berat').on("keyup change blur", recalc);
               });

               var i=0;
               $('#add_new').click(function(){
                   i++;
                   $('#mainbody').append('<tr><td>' +
                     '<select class="form-control nama" name="addmore['+i+'][nama]" id="nama'+i+'" onchange="selectProduct(this)" required >' +
                     '<option disabled="disabled" selected="selected" value="">Select Produk</option>' +
                   '<option value="1" data-berat="100">Item 1</option>' +
                     '<option value="1" data-berat="170">Item 2</option>' +
                     '</select></td>' +
                     '<td><input class="form-control qty" type="number" name="addmore['+i+'][qty]" id="qty'+i+'" required ></td>' +
                     '<td><input step=".001" class="form-control berat" type="number" name="addmore['+i+'][berat]" id="berat'+i+'" required ></td>' +
                     '<td><input class="form-control subtotal" type="number" name="addmore['+i+'][subtotal]" id="subtotal'+i+'" required readonly></td>'
                   )
               });
           });
    </script>
    </head>
    <body>
   <div class="table-responsive">
  <table class="table-bordered" width="100%" id="kas_table">
    <thead>
      <tr>
        <th width="40%">Name</th>
        <th width="10%">Qty</th>
        <th width="10%">Weight</th>
        <th>Subtotal KG</th>
        <th>
          <button id="add_new" type="button" name="add_new" class="btn btn-sm btn-success"> +</button>
        </th>
      </tr>
    </thead>
    <tbody id="mainbody">
      <tr>
        <td><select class="form-control nama" name="addmore[0][nama]" id="nama0" onchange="selectProduct(this)" required >
        <option disabled="disabled" selected="selected" value="">Select Produk</option>
        <option value="1" data-berat="100">Item 1</option>
        <option value="2" data-berat="170">Item 2</option>
        </select></td>
        <td><input class="form-control qty" type="number" name="addmore[0][qty]" id=qty0 required></td>
        <td><input step=".001" class="form-control berat" type="number" name="addmore[0][berat]" id="berat0" required></td>
        <td><input class="form-control subtotal" type="number" name="addmore[0][subtotal]" id="subtotal0" readonly></td>
      </tr>
  </tbody>
  </table>               
</div>
  </body>
  </html>