title: how to get value from multiple inputs with same name, Input Fields Dynamically with jQuery?
body: <p>I want to add amount, quantity, subtotal fields as invoice item dynamically clicking on a button.</p>
  <p>But the problem is when I want to get the value of <code>quantity</code> and <code>amount</code> input field value to calculate each time, I can't fetch the value using jquery because of same id name.</p>
  <p>How can I get the dynamic field value to calculate subtotal.</p>
  <p>Here is the code.</p>
  <pre><code>@extends('layout.master')
  @section('css')
      @endsection
  @section('content')
         
            &lt;div id=&quot;saveInvoice&quot;&gt;
              &lt;table id=&quot;dynamicAddRemove&quot;&gt;
                &lt;tr&gt;
                  &lt;th class=&quot;wd-15p fontColor&quot;&gt;Invoice Entry&lt;/th&gt;
                  &lt;th class=&quot;wd-15p fontColor&quot;&gt;Quantity&lt;/th&gt;
                  &lt;th class=&quot;wd-15p fontColor&quot;&gt;Amount&lt;/th&gt;
                  &lt;th class=&quot;wd-15p fontColor&quot;&gt;Subtotal&lt;/th&gt;
                  &lt;th class=&quot;wd-10p fontColor&quot;&gt;&lt;/th&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td class=&quot;td&quot;&gt;&lt;input type=&quot;text&quot; name=&quot;entry[]&quot; placeholder=&quot;Enter entry&quot; class=&quot;form-control&quot; /&gt;&lt;/td&gt;
                  &lt;td class=&quot;td&quot;&gt;&lt;input type=&quot;text&quot; name=&quot;quantity[]&quot; placeholder=&quot;Enter quantity&quot; class=&quot;form-control quantity&quot; id=&quot;quantity&quot;/&gt;&lt;/td&gt;
                  &lt;td class=&quot;td&quot;&gt;&lt;input type=&quot;text&quot; name=&quot;amount[]&quot; placeholder=&quot;Enter amount&quot; class=&quot;form-control amount&quot; id=&quot;amount&quot; /&gt;&lt;/td&gt;
                  &lt;td class=&quot;td&quot;&gt;&lt;input type=&quot;text&quot; name=&quot;subtotal[]&quot; placeholder=&quot;Subtotal&quot; class=&quot;form-control subtotal&quot;id=&quot;subtotal&quot; value=&quot;0.00&quot; readonly/&gt;&lt;/td&gt;
                  &lt;td class=&quot;td2&quot;&gt;&lt;button type=&quot;button&quot; name=&quot;add&quot; id=&quot;add-btn&quot; class=&quot;btn btn-success&quot;&gt;Add More&lt;/button&gt;&lt;/td&gt;
                &lt;/tr&gt;
             &lt;/table&gt;
             &lt;br&gt;
              &lt;input type=&quot;hidden&quot; name=&quot;patientId&quot; id=&quot;patientId&quot;&gt;
              &lt;input type=&quot;submit&quot; id=&quot;submit&quot; value=&quot;Save Invoice&quot; class=&quot;btn btn-dark&quot;&gt;
            &lt;/div&gt;
  
            {!! Form::close() !!}
          &lt;/div&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;br&gt;
  &lt;/div&gt;
  
  @endsection
  
  @section('js')
  &lt;script src=&quot;http://cdn.bootcss.com/jquery/2.2.4/jquery.min.js&quot;&gt;&lt;/script&gt;
  
  
  &lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
    $(document).ready(function () {
      var i = 0;
      $(&quot;#add-btn&quot;).click(function(){
        ++i;
        $(&quot;#dynamicAddRemove&quot;).append('&lt;tr&gt;&lt;td class=&quot;td&quot;&gt;&lt;input type=&quot;text&quot; name=&quot;entry['+i+']&quot; placeholder=&quot;Enter entry&quot; class=&quot;form-control&quot;/&gt;&lt;/td&gt;&lt;td class=&quot;td&quot;&gt;&lt;input type=&quot;text&quot; name=&quot;quantity['+i+']&quot; placeholder=&quot;Enter quantity&quot; class=&quot;form-control quantity&quot; id=&quot;quantity&quot; /&gt;&lt;/td&gt;&lt;td class=&quot;td&quot;&gt;&lt;input type=&quot;text&quot; name=&quot;amount['+i+']&quot; placeholder=&quot;Enter amount&quot; class=&quot;form-control amount&quot; id=&quot;amount&quot;/&gt;&lt;/td&gt;&lt;td class=&quot;td&quot;&gt;&lt;input type=&quot;text&quot; name=&quot;subtotal['+i+']&quot; placeholder=&quot;Subtotal&quot; class=&quot;form-control subtotal&quot; value=&quot;0.0&quot; id=&quot;subtotal&quot; readonly/&gt;&lt;/td&gt;&lt;td class=&quot;td2&quot;&gt;&lt;button type=&quot;button&quot; name=&quot;add&quot; id=&quot;add-btn&quot; class=&quot;btn btn-danger remove-tr&quot;&gt;Remove&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;');
        });
        $(document).on('click', '.remove-tr', function(){
        $(this).parents('tr').remove();
      });
    });
  &lt;/script&gt;
  
  &lt;script src=&quot;http://cdn.bootcss.com/jquery/2.2.4/jquery.min.js&quot;&gt;&lt;/script&gt;
   &lt;script type=&quot;text/javascript&quot;&gt;
    $(document).ready(function () {
  
      $('#amount').on('keyup',function(){
        var amount = $(this).val();
        console.log(amount);
        var quantity = $('#quantity').val();
        var subtotal=amount*quantity;
        $('#subtotal').val(subtotal);
  
        });
        $('#quantity').on('keyup',function(){
  
        var quantity =$(this).val();
        console.log(amount);
        var amount = $('#amount').val();
        var subtotal=amount*quantity;
        $('#subtotal').val(subtotal);
  
        });
    });
  &lt;/script&gt;
  
  @endsection
  </code></pre>