javascript - Get values from multiple inputs jQuery with same name and add the the values together -

image of appending of items using jquery

function fill(thisvalue) {      function suggest(inputstring) {          var inputstring = $.trim(inputstring);          if(inputstring.length == 0) {              $('#suggestions').fadeout('slow');          } else {              $('#country').addclass('load');              $.post("<?php echo base_url();?>customer/get_item_list", {querystring: "" + inputstring + ""}, function(data) {                  if(data.length >0) {                      $('#suggestions').fadein();                      $('#suggestionslist').html(data);                      $('#country').removeclass('load');                  } else {                      $("#scan_box").val("");                  }              });          }      }        var maxinputs = 15; //maximum input items allowed      var x = 0;      var fieldcount = 0; //to keep track of text box added        function fill(thisvalue) {          settimeout("$('#suggestions').fadeout();", 1000);          $("#scan_box").val("");          data = thisvalue.split('-');          $('#item_code').val(data['0']);          $('#item_name').val(data[1]).css('font-weight','bolder');          $('#cost_price').val(data[2]);          $('#item_code_code').val(data['0']);               if(x <= maxinputs) { //max input box allowed              fieldcount++;              $('#pos-tbbody').append('<tr id="tr" style="font-weight:bolder"><td>'+data[1]+'</td><td><input type="hidden" required id="item_code" name="item_code[]" value="'+data['0']+'"><input type="text" size="20" value="'+data[2]+'" style="width:100px" name="cost_price[]"></td><td><input type="number" class="qty" style="width:70px"  value="1" name="qty[]" onclick="multiply(this.value)" onkeydown="multiply(this.value)" onkeyup="multiply(this.value)" ></td> <td></td> <td class="text-center"><div class="btn-group btn-group-xs"><a href="javascript:void(0)" data-toggle="tooltip" title="delete" class="btn btn-danger removeclass"><i class="fa fa-times"></i></a></div></td></tr>');              x++;          }          return false;      }        function multiply(qty_value) {          var total = data[2] * qty_value;          //$('.total_amount').text(total);          $("#amount_tendered").val(total);          return total;      }      $(document).ready(function() {          $('#pos-tbbody').on("click", ".removeclass", function(e) { //user click on remove text              if(x >= 1) {                  $('#tr').remove();                  x--;              }              return false;          });      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">  <div>       <table>          <tr>              <td><label class="control-label">search</label></td>              <td><input type="text" style="background-color:#eaedf1;font-size:1.2em;font-weight:bolder" onkeyup="suggest(this.value);" onkeydown="suggest(this.value);" name="item_search" class="form-control" size="80"  placeholder="start typing item's or scan barcode" id="scan_box" onblur="fill();"/></td>          </tr>      </table>      <div class="col-md-9 suggestionsbox" id="suggestions" style="display:none; cursor:pointed;z-index:2000px ;display: block; position: absolute; ">          <p class="suggestionlist" id="suggestionslist" style="z-index:2000px ;cursor:pointed"> &nbsp; </p>      </div>	      <div class="table-responsive" style="height:22em;overflow:scroll">          <table class="table table-vcenter table-hover table-striped table-bordered ">              <thead style="padding:10px">                  <tr style="background-color:#563d7c;color:#fff;">                      <th class="text-center" style="width: 150px;">item </th>                      <th>price</th>                      <th>qty.</th>                      <th>total</th>                      <th class="text-center">actions</th>                  </tr>              </thead>              <tbody id="pos-tbbody">              </tbody>              </thead>          </table>      </div>      <input type="submit" value="save" class="btn btn-success btn-block btn-sm btn-raised" name="save_item_recieve">				  </div>

settimeout("$('#suggestions').fadeout();", 1000);   $("#scan_box").val(""); data = thisvalue.split('-');    $('#item_code').val(data['0']); $('#item_name').val(data[1]).css('font-weight','bolder'); $('#cost_price').val(data[2]); $('#item_code_code').val(data['0']);      if(x <= maxinputs) //max input box allowed {        fieldcount++;       $('#pos-tbbody').append('<tr id="tr" style="font-weight:bolder">      <td>'+data[1]+'</td>      <td><input type="hidden" required id="item_code" name="item_code[]" value="'+data['0']+'"><input type="text" size="20" value="'+data[2]+'" style="width:100px" name="cost_price[]"></td>      <td><input type="number" class="qty" style="width:70px"  value="1" name="qty[]" onclick="multiply(this.value)" onkeydown="multiply(this.value)" onkeyup="multiply(this.value)" ></td>       <td></td> <td class="text-center"><div class="btn-group btn-group-xs"><a href="javascript:void(0)" data-toggle="tooltip" title="delete" class="btn btn-danger removeclass"><i class="fa fa-times"></i></a></div></td>      </tr>');       x++;     }     return false;      }  

basic idea. select elements , loop on them.

function addup(){      var cnt = 0;        $("[name='thename']").each(function() {          cnt += number(this.value);      });      $("#total").val(cnt);  }  $("[name='thename']").on("change", addup);  addup();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <input type="text" name="thename" value="1" />  <input type="text" name="thename" value="1" />  <input type="text" name="thename" value="1" />  <input type="text" name="thename" value="1" />  <input type="text" name="thename" value="1" />  <label for="total">total:</label><input type="text" id="total">