<div class="card-body">
                                <h3 align="center"><?php echo $products; ?></h3>
                                <table align="center">
                                    <thead>
                                      <tr>
                                        <th style="text-align:center;"><?php echo $code; ?></th>
                                        <th style="text-align:center;"><?php echo $product; ?></th>
                                        <th style="text-align:center;"><?php echo $quantity.' '.$total; ?> <a href="showproducts.php" target="_blank"><i class="fas fa-edit text-danger"></i></a></th>
                                        <th style="text-align:center;"><?php echo $quantity; ?></th>
                                        <th style="text-align:center;"><?php echo $price.' '.$unit; ?></th>
                                        <th style="text-align:center;"><?php echo $price.' '.$total; ?></th>
                                      </tr>
                                    </thead>
                                        <tr>
                                        <td>
                                        <input name="codebar" onchange="codefetch()" type="text" class="form-control form-control-sm"></td>
                                        </td>
                                        <td>
                                        <input type="text" name="product" onchange="autofill()" id="prodname" class="form-control form-control-sm" autocomplete="off" placeholder="<?php echo $prodname; ?>" />
                                        </td>
                                        <td><div class=""><input id="quantity" name="quantity" readonly type="text" class="form-control form-control-sm"></td>
                                        <td><input id="neededquantity" name="neededquantity" type="text" class="form-control form-control-sm"></td>
                                        <td><input id="sellprice" name="sellprice" type="text" class="form-control form-control-sm sellprice"></td>
                                        <td><input id="totalprice" name="totalprice" readonly type="text" class="form-control form-control-sm"></td>
                                        </tr>
                                    <tbody id="orderTable">
                                    </tbody>
                                </table>
                                <center style="padding:10px;">
                                    <button id="add" style="width:150px;" onclick="addRow()" class="btn btn-success">Add</button>
                                    <button id="remove" style="width:150px;" class="btn btn-danger">Remove</button>
                                </center>
                            </div>
                        </div>

function autofill(){

    var name = $('input[name=product]').val();
    $.ajax({
        url: 'gpin.php',
        data: 'name='+name,
        success: function (data){
        var json = data;
        obj = JSON.parse(json);
        $('input[name=quantity]').val(obj.quantity);
        $('input[name=sellprice]').val(obj.sellprice);
        $('input[name=codebar]').val(obj.code);
    }
    });
}

function codefetch(){
    var code = $("input[name=codebar]").val();
    $.ajax({
        url: 'gpic.php',
        data: 'code='+code,
        success: function (data){
        var json = data;
        obj = JSON.parse(json);
        $('input[name=product]').val(obj.name);
        $('input[name=quantity]').val(obj.quantity);
        $('input[name=sellprice]').val(obj.sellprice);
    }
    });
}

$(document).ready(function(){

 $('#prodname').typeahead({
  source: function(query, result)
  {
   $.ajax({
    url:"prodnameautofill.php",
    method:"POST",
    data:{query:query},
    dataType:"json",
    success:function(data)
    {
     result($.map(data, function(item){
      return item;
     }));
    }
   })
  }
 });

});


    function calculate() {
        var myBox1 = $('input[name=neededquantity]').val();
        var myBox2 = $('input[name=sellprice]').val();
        var result = $('input[name=totalprice]').val();
        var myResult = myBox1 * myBox2;
          $('input[name=totalprice]').val(myResult);
        var quantity = $('input[name=quantity]').val();
        var neededquantity = $('input[name=neededquantity]').val();
        var myResult2 = quantity - neededquantity;
        if (myResult2 < 0){
            document.getElementsByName('neededquantity').className = ('form-control form-control-sm bg-danger text-light');
        }
        else {
            document.getElementsByName('neededquantity')[0].className = ('form-control form-control-sm bg-success text-light');
        }
    }

    function addRow() {
      var table = document.getElementById("orderTable");
      var row = table.insertRow(0);
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      var cell3 = row.insertCell(2);
      var cell4 = row.insertCell(3);
      var cell5 = row.insertCell(4);
      var cell6 = row.insertCell(5);
      cell1.innerHTML = '<input name="codebar" onchange="codefetch()" type="text" class="form-control form-control-sm">';
      cell2.innerHTML = '<input type="text" name="product" onchange="autofill()" id="prodname" class="form-control form-control-sm" autocomplete="off" placeholder="<?php echo $prodname; ?>" />';
      cell3.innerHTML = '<input name="quantity" readonly type="text" class="form-control form-control-sm">';
      cell4.innerHTML = '<input name="neededquantity" type="text" oninput="calculate();" class="form-control form-control-sm">';
      cell5.innerHTML = '<input name="sellprice" type="text" oninput="calculate();" class="form-control form-control-sm sellprice">';
      cell6.innerHTML = '<input name="totalprice" readonly type="text" class="form-control form-control-sm">';
    }

cell2.innerHTML = '<input type="text" name="product" onchange="autofill()" id="prodname" class="form-control form-control-sm" autocomplete="off" placeholder="<?php echo $prodname; ?>" />';