Why I am not getting total value correctly after changing in item name?

I am new in Javascript. I have created an invoice table where the total value in the last column is calculated by selecting item price with putting the value in quantity field.

There are two issues being faced by me.

  1. The total value is calculated correctly when I put the value in the quantity but total value isn’t updating the correct total when I change item name. issue111

  2. The total value isn’t reflecting, when I set the type of input i.e type=”number” and try to add value by arrow

issue222

Here is the Code:

<div class="box pattern pattern-sandstone">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Item</th><th>Description</th><th>Price</th><th>Qty</th><th>Total</th>
</tr></thead>
<tbody id="customFields">
<tr>
<td>1</td><td >
<?php
$conn = mysqli_connect('localhost','dbuser','dbpass','dbname'); 

$query_order_to = "SELECT * from gs_items ORDER BY item_name ASC";
$result_order_to = $conn->query($query_order_to); ?>
<select name="selected_item" id="selected_item" onchange="myItemPrice()" data-placeholder="Item Name" >
<option value="">Select Item</option>
<?php
while($rows=mysqli_fetch_assoc($result_order_to))
{ ?> <option data-price='<?php echo $rows['price']; ?>' value='<?php echo $rows['Id']; ?>'> <?php echo $rows['item_name']; ?></option>";
<?php } ?>  </select> </td>
<td ><textarea style="min-width: 90%;"></textarea></td>
<td >  <input type="text" name="getprice"  id="getprice" readonly></td>
<td ><input type="number" id="qty" onKeyUp="multiply()" input-number></td>
<td ><input  type="text" id="total" readonly></td>
<td><button onclick="addRow();">Add</button></td>
</tr>
</tbody>
</table>
</div>


<script>
 function findAddress(){
       var address = $('#select_data').find(':selected').data('address');
       $('#getcustomeraddress').val(address);
    }
</script>

<script>
 function myItemPrice(){
       var price = $('#selected_item').find(':selected').data('price');
       $('#getprice').val(price);
    }
</script>

<?php 

$conn = mysqli_connect('localhost','dbuser','dbpass','dbname'); 


function fill_unit_select_box($conn)
{ 
$query_item = "SELECT * from gs_items ORDER BY item_name ASC";
$result_item = $conn->query($query_item);
 $x = 1;
foreach($result_item as $rows)
{    echo '<option data-prices="'.$rows['price'].'" value="'.$rows['Id'].'">'.$rows['item_name'].'</option>';
 }
} ?>
<script>
  function addRow()
  {  var table = document.getElementById("customFields");
var i = 0;
while (i <= table.rows.length) {
    i++;
 }
i=i-1; 
    var html = '';
  html += '<tr>';
  html += '<td >'+i+'</td>';
  html += '<td><select name="selected_items'+i+'" id="selected_items'+i+'" onchange="myItemPrices(' + i +')" data-placeholder="Item Name" ><option value="">Select Item</option>';
  html += ' <?php echo fill_unit_select_box($conn); ?>
  </select></td>';
    html += '<td > <textarea style="min-width: 90%;"></textarea></td>';
    html +='<td ><input type="text" disabled name="getprices'+i+'" style="font-size: 12px; color: #333333;" id="getprices'+i+'" ></td>';
    html +='<td ><input type="number" ></td>';
     html +='<td ><input type="number" ></td>';
    html +='<td><button onclick="remove();">Remove</button></td>';
    html +='</tr>';
    $('#customFields').append(html);
  }
 function myItemPrices(var1){
 i=var1;
 var prices = $('#selected_items'+i+'').find(':selected').data('prices');
 $('#getprices'+i+'').val(prices); }  

   </script>

<script>
function multiply() {
  a = Number(document.getElementById('qty').value);
  b = Number(document.getElementById('getprice').value);
  c = a * b;

  document.getElementById('total').value = c;
}
</script>

Answer

After several tries to find the solution, Finally I got the answer:

 <script>
     function myItemPrice(){
           var price = $('#selected_item').find(':selected').data('price');
           $('#getprice').val(price);
           var getprice = document.getElementsByName('getprice')[0].value;
          var qty = document.getElementsByName('qty')[0].value;
          var total;
         total = parseFloat(getprice) * parseFloat(qty);
          document.getElementsByName('total')[0].value = total;
        }
    </script>