Passing the value from JavaScript variable to php

I have a form in which there is an ADD button whcih adds row to the form using java script .after that this form is used to update the data in table.For updating the data in mysql table i have to run one loop depending upon the number of row added by the user. Problem is how to identify how many number of of times this loop will run. Presently i am manually inserting the value by one input box count.I want this value to be calculated automatically so that i can remove this input box.My code is length still i am posting it here .

<?php
session_start();
error_reporting(0);
include('includes/config.php');
if(strlen($_SESSION['alogin'])==0)
    {   
header('location:index.php');
}
else{ 

if(isset($_POST['add']))
    {


$samplecount=$_POST["count"];

        for($i=0;$i<$samplecount;$i++){
            
$txntype="received";    
$orderno=$_POST['orderno'];
$orderdate=$_POST["orderdate"];
$stationerytype=$_POST['stationerytype'];
$stationeryqtyrecd=$_POST['stationeryqtyrecd'];
$sql="INSERT INTO  tblstationerystock(txntype,orderno,orderdate,stationerytype,stationeryqtyrecd) VALUES(:txntype,:orderno,:orderdate,:stationerytype,:stationeryqtyrecd)";

$query = $dbh->prepare($sql);
$query->bindParam(':txntype',$txntype,PDO::PARAM_STR);
$query->bindParam(':orderno',$orderno,PDO::PARAM_STR);
$query->bindParam(':orderdate',$orderdate,PDO::PARAM_STR);
$query->bindParam(':stationerytype',$stationerytype[$i],PDO::PARAM_STR);
$query->bindParam(':stationeryqtyrecd',$stationeryqtyrecd[$i],PDO::PARAM_STR);
$query->execute();
$lastInsertId = $dbh->lastInsertId();

if($lastInsertId)

{
$_SESSION['msg']="Stationery Added successfully";

echo "<script>window.close();</script>";

}
else 
{
$_SESSION['error']="Something went wrong. Please try again";
header('location:index.php');
}
}
}
}
?>
<!DOCTYPE html>
<html>
    <head>
        
                <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Add Stationery Stock</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
                 
    </head>
    <body>
    
        <br />
        <div class="container" style="border: 2px solid #B22222;border-radius: 10px;margin-top: 25px;margin-bottom: 15px;>
            <div class="row">
                <div class="col-md-4">
                </div>
                <div class="col-sm-12">
                    <h4 align="center"><b><u>Add Stationery Stock<b></u></h4>
                    <br />
                    <form method="post" id="insert_form" onSubmit="if(!confirm('You have entered correct no of total items')){return false;}">
                    <div class="col-sm-6">
                    <input type="text" name="orderno" class="form-control" placeholder="Order NO "/>
                    </div>
                    <div class="col-sm-6">
                    <input type="date" name="orderdate" class="form-control" placeholder="Date" />
                    </div>
                    &nbsp;
                    
                    <div>&nbsp;</div>
                    <h4 align="center"><b><u>Stationery Details<b></u></h4>
                    <div>&nbsp;</div>
                    
                        <div class="table-repsonsive">
                            <span id="error"></span>
                            <table class="table table-bordered"  id="tb">
                                <tr>
                                    <th  width=10%;>Sl.No.</th>
                                    <th width=45%;>Select Stationery Type</th>
                                    <th width=30%;>Enter Quantity</th>
                                    <th width=10%;><button type="button" align="center" name="add" id="addMore" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
                                </tr>
                                
<tr>
<?php
for($i=1;$i<=1;$i++)
{   
?>

<td><input type="text"  name="slno" value= "<?php echo $i; ?>" class="form-control " readonly ></td>

<td><select  type="text" name="stationerytype[]" class="form-control" placeholder="Select Type" required >
   <option ></option>
   <option value="A4 GREEN REAM">A4 GREEN REAM</option>
   <option value="A4 WHITE REAM">A4 WHITE REAM</option>
   <option value="CELLOTAPE(BROWN)">CELLOTAPE(BROWN)</option>
     
     
</select></td>
<td><input type="NUMBER" name="stationeryqtyrecd[]" onkeydown="upperCaseF(this)" class="form-control" min=1 required ></td>


<td><a href='javascript:void(0);'  class="btn btn-danger btn-sm remove" align="middle"><span class='glyphicon glyphicon-remove' align="middle"></span></a></td>
</tr>
<?php  }?>
</table>
                                <div class="block">
                                <input type="number" name="count" class="col-sm-2  glyphicon glyphicon-search" style="width: 70px ;height: 30px; color:red; margin-right:20px;font-weight: bold;" placeholder="&#xe093" max=15 min=1 required />
                                <label>Enter the Total Number of Items<span style="color:red;">*</span></label>
                                </div>
                                
                                
                                <div align="center">
                                <button type="submit" name="add" class="btn btn-info" style="margin-bottom:20px"  align="middle" >ADD </button>
                                                            
                            
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
    </body>
</html>

<script>
var max = 14;
var count = 1;
<?php $abc = "<script>document.write(count)</script>"?>
$(function(){
    $('#addMore').on('click', function() {
            if(count <= max ){
              var data = $("#tb tr:eq(1)").clone(true).appendTo("#tb");
              data.find("input").val('');
               debugger;
              data.find("input")[0].value=++count;
              
            }else{
             alert("Sorry!! Can't add more than fifteen row at a time !!");
           }
              
     });
     $(document).on('click', '.remove', function() {
         var trIndex = $(this).closest("tr").index();
            if(trIndex>1) {
             $(this).closest("tr").remove();
              count--;
             
             // get all the rows in table except header.
             $('#tb tr:not(.tr-header)').each(function(){
             $(this).find('td:first-child input').val(this.rowIndex);
             })
           } else {
             alert("Sorry!! Can't remove first row!");
           }
      });
}); 
 
</script>