How to add dynamic rows in html table in php from mysql

This is my first post and i am new in PHP, i am trying to build a POS system using PHP, but i stuck in sales module.

Problem is when I scan barcode of an item, it display in textbox where i have set focus, and when i click add item button but when i repeat this step for another item(s), it remove first item and replace it with latest item, i have put my 100% but can't figure out why this is happening, thatswhy please help me in this regards as i know there are so many good developers in php in this forum.

Here is my code for you:

<script type="text/javascript">

 function setFocus(){

 document.getElementById("searchitem").focus();



 }



function change()

{

    var searchitem = document.getElementById('searchitem');

    if(searchitem.value == '')

    {

        searchitem.style.background = 'orange';

    }

    else

    {

        searchitem.style.background = '';

    }

}

</script>







<?php $name = "Mehroz"; ?>

    <SCRIPT language="javascript">

       /* setInterval("SANAjax();",5000);

        $(function(){

          SANAjax = function(){

          $('#dataDisplay').prepend("HI This").fadeIn("slow");



          }



        }) ;  */







       function addRow(tableID) {



            var table = document.getElementById(tableID);



            var rowCount = table.rows.length;

            var row = table.insertRow(rowCount);



            var cell1 = row.insertCell(0);

            var element1 = document.createElement("input");

            element1.type = "checkbox";

            cell1.appendChild(element1);



            var cell2 = row.insertCell(1);

            cell2.innerHTML = rowCount + 0;



            var cell3 = row.insertCell(2);

            var element2 = document.createElement("input");

            element2.type = "text";

            element2.value = '<?php echo $name;?>';

             element2.size = "15";

            cell3.appendChild(element2);



            var cell4 = row.insertCell(3);

            var element3 = document.createElement("input");

            element3.type = "text";

            element3.size = "25";

            element3.disabled = "disabled";

            cell4.appendChild(element3);



            var cell5 = row.insertCell(4);

            var element4 = document.createElement("input");

            element4.type = "text";

            element4.size = "3";

            element4.disabled = "disabled";

            cell5.appendChild(element4);



            var cell6 = row.insertCell(5);

            var element5 = document.createElement("input");

            element5.type = "text";

            element5.size = "3";

            element5.disabled = "disabled";

            cell6.appendChild(element5);



            var cell7 = row.insertCell(6);

            var element6 = document.createElement("input");

            element6.type = "text";

            element6.size = "5";

            cell7.appendChild(element6);



            var cell8 = row.insertCell(7);

            var element7 = document.createElement("input");

            element7.type = "text";

            element7.size = "5";

            cell8.appendChild(element7);



            var cell9 = row.insertCell(8);

            var element8 = document.createElement("input");

            element8.type = "text";

            element8.size = "10";

            cell9.appendChild(element8);



            var cell10 = row.insertCell(9);

            var element9 = document.createElement("input");

            element9.type = "submit";

            element9.value = "Update";

            cell10.appendChild(element9);









        }



        function deleteRow(tableID) {

            try {

            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;



            for(var i=0; i<rowCount; i++) {

                var row = table.rows[i];

                var chkbox = row.cells[0].childNodes[0];

                if(null != chkbox && true == chkbox.checked) {

                    table.deleteRow(i);

                    rowCount--;

                    i--;

                }



            }

            }catch(e) {

                alert(e);

            }

        }





    </SCRIPT>



<script src="menuscript.js" language="javascript" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="menustyle.css" media="screen, print" />



</head>



<body onload="setFocus();change();">





<div class="left">

<form action="javascript:addRow('dataTable')" method="POST">

<input id="searchitem" name="add" type="text" onkeyup="change()" size="75" onclick="javascript:addRow('dataTable')"></input></td><td width="25%" colspan="2">

<input type="submit" value="New Item" name="search">

<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" /></form>

</br>

<table width="98%" id="dataTable">

<tr bgcolor="97c950">

<b>

<td align="center" width="3%"></td>

<td align="center" width="5%">S#</td>

<td align="center" width="15%">Barcode</td>

<td align="center" width="27%">Item Name</td>

<td align="center" width="4%">Stock</td>

<td align="center" width="4%">Qty</td>

<td align="center" width="6%">Price</td>

<td align="center" width="6%">Disc.Rs.</td>

<!-- <td align="center" width="7%">Disc.%</td> -->

<td align="center" width="10%">Total</td>

<td align="center" width="23%"></td></tr>



  <!-- <form action="javascript:addRow('dataTable')" method="POST">



    <INPUT type="text" name="add" value=""/>

    <INPUT type="submit" value="Add Row" name="search" />

    </form> -->

        <TR>

            <TD><INPUT type="checkbox" name="chk" /></TD>

            <TD> 1 </TD>

            <TD> <INPUT type="textbox" size="15" /> </TD>

            <TD> <INPUT type="textbox" size="25" disabled="disabled" /> </TD>



                                    <TD> <INPUT type="textbox" size="3" disabled="disabled"/> </TD>

                                                <TD> <INPUT type="textbox" size="3" disabled="disabled"/> </TD>

                                                            <TD> <INPUT type="textbox" size="5" /> </TD>

                                                <TD> <INPUT type="textbox" size="5" /> </TD>

                                    <TD> <INPUT type="textbox" size="10" /> </TD>

                                 <TD> <INPUT type="submit" value="Update" /> </TD>



       </TR>



                  </form>





</table>



</div>

Please help me.