How can I take the value of dynamically created fields jquery?-CodePudding

I'm stuck in the jQuery code, I want to make dynamic fields, but the problem is when I want to print the following equation in the total value, it only appears in the first value of the dynamic values, what is the solution to this problem

   <div class="container">
      <table class="table table-responsive" id="tal">
        <thead>
          <tr>
            <td>price</td>
            <td>quantity</td>
            <td>total $</td>
            <td><button type="button" class="btn-outline-success" id="add-new-row">addRow</button></td>
          </tr>
        </thead>
        <tbody id="addNewTR">
          <tr>
        
          </tr>
        </tbody>
      </table>
    </div>

jquery code

$(document).ready(function(){
     var x = 1;
      var min = 1;
      var max = 4;
      var html = '<tr><td><input type="text" name="price[]" id="price" ></td><td><input type="text" name="qty[]" id="qty" ></td><td><input type="text" name="total[]" id="total" disabled=""></td><td><button type="button" class="btn-outline-danger" id="remove">remove</button></td></tr>';


    $("#add-new-row").click(function(i){    
        i.preventDefault();
              if (x <= max) {

                var price = $("#price").val();
                 var qty = $("#qty").val();
                  var sum = parseInt($("#price").val()) *  parseInt($("#qty").val()) ;
                  $("#total").val(sum);

            $("#addNewTR").append(html); 

            x  ;
            }
            });

              $("#addNewTR").on('click','#remove',function(){
                    $(this).closest("tr").remove();
                    x--;
               });
    
              });

CodePudding user response：

here is the updated working code. you must need a unique id for each append element.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script type="text/javascript">
 $(document).ready(function () {
    var x = 1;
    var min = 1;
    var max = 4;
    $("#add-new-row").click(function (i) {
        i.preventDefault();
        if (x <= max) {

            var i = x - 1;
            var price = $("#price"   i).val();
            var qty = $("#qty"   i).val();
            var sum = parseInt($("#price"   i).val()) * parseInt($("#qty"   i).val());
            $("#total"   i).val(sum);
            var html = "";
            html = '<tr><td><input type="text" name="price[]" id="price'   x   '" ></td><td><input type="text" name="qty[]" id="qty'   x   '" ></td><td><input type="text" name="total[]" id="total'   x   '" disabled=""></td><td><button type="button"  id="remove">remove</button></td></tr>';

            $("#addNewTR").append(html);

            x  ;
        }
    });

    $("#addNewTR").on('click', '#remove', function () {
        $(this).closest("tr").remove();
        x--;
    });

});
</script>

<body>
  <div class="container">
      <table class="table table-responsive" id="tal">
        <thead>
          <tr>
            <td>price</td>
            <td>quantity</td>
            <td>total $</td>
            <td><button type="button" class="btn-outline-success" id="add-new-row">addRow</button></td>
          </tr>
        </thead>
        <tbody id="addNewTR">
          <tr>
        
          </tr>
        </tbody>
      </table>
    </div>
  <body/>

CodePudding user response：

function fn_onblulr(e){
       var price = $(e.target).closest('tr').find('.quantity').val();
       let quantity = $(e.target).closest('tr').find('.quantity').val();
       let total = $(e.target).closest('tr').find('.total');
       $(total).val(price*quantity);
      }


$(document).ready(function(){
     var x = 1;
      var min = 1;
      var max = 4;
      
      var html = '<tr><td><input type="text"  name="price[]" id="price" ></td><td><input type="text"  name="qty[]" onblur="fn_onblulr(event)" id="qty" ></td><td><input type="text"  name="total[]" id="total" disabled=""></td><td><button type="button"  id="remove">remove</button></td></tr>';

     
    $("#add-new-row").click(function(i){    
        i.preventDefault();
              if (x <= max) {

                var price = $("#price").val();
                 var qty = $("#qty").val();
                  var sum = parseInt($("#price").val()) *  parseInt($("#qty").val()) ;
                  $("#total").val(sum);

            $("#addNewTR").append(html); 

            x  ;
            }
            });

              $("#addNewTR").on('click','#remove',function(){
                    $(this).closest("tr").remove();
                    x--;
               });
    
    });

Change Script