向表中添加行并计算行值

Question

<div class="col-xs-12 col-md-10" style="padding:0px 100px 0px 50px; color:blue;">   
        <form action="#" style="color:blue;" method="POST" >

            <div class="well well-sm" >
                <table border="collapse; border-spacing:5px;" style="background-color:pink;">
                <thead> 
                    <th>Stock ID</th>
                    <th>Medicine Name</th>
                    <th>Quantity Unit</th>
                    <th>Unit Price</th>
                    <th>Selling Price</th>
                    <th>Sold Quantity</th>
                    <th>Total Price</th>
                    <th><input type="button" value="+" id="add" class="btn btn-primary"></th>                   
                </thead>
                <tbody class="detail">
                <tr>
                    <td><input type="text" class="form-control" id="si" name="si"></td>
                    <td><input type="text" class="form-control" id="mn" name="mn" value="<?php 
                        include_once('classes/class.select.php');
                        $bill = new select();
                        $value = $bill ->billing($_POST['si']);
                            foreach($value as $row){

                            echo    $row["medi_name"];
                            }

                            ?>"></td>
                    <td><input type="text" class="form-control" id="qu" name="qu" value="<?php echo $row["quantity_unit"];?>"></td>
                    <td>
                    <input type="text" class="form-control" id="up" name="up" value="<?php echo $row["unit_price"]; ?>"></td>
                    <td>
                    <input type="text" class="form-control" id="sp" name="sp" value="<?php echo $row["selling_price"];?>"></td>
                    <td><input type="text" class="form-control" id="t" name="t" ></td>  
                    <td><input type="text" class="form-control" id="ls" name="ls" ></td>
                    <td><input type="submit" class="btn btn-success" value="Bill" name="savesel"><br></td>          
                </tr>
                </tbody> 
                </table>
            </div>



        </form> 

    </div>  

这是我的医药计费系统表。当我们提供库存ID时，其他列会根据相关库存ID自动填充。我想像这样在这个表中添加更多行。但是当我点击第二行的账单按钮时，整行将消失。我还想计算最终的总价格。

<script>
function addnew(){
    var n=($('.detail tr').length-0)+1;
    var tr =
    '<tr>' +
    '<td><input type="text" class="form-control" id="si" name="si"></td>'+
    '<td><input type="text" class="form-control" id="mn" name="mn" value="<?php 
                        include_once('classes/class.select.php');
                        $bill = new select();
                        $value = $bill ->billing($_POST['si']);
                            foreach($value as $row){

                            echo    $row["medi_name"];
                            }

                            ?>"></td>'+
    '<td><input type="text" class="form-control" id="qu" name="qu" value=["quantity_unit"]></td>'+
    '<td><input type="text" class="form-control" id="up" name="up" value=["unit_price"]></td>'+
    '<td><input type="text" class="form-control" id="sp" name="sp" value=["selling_price"]></td>'+
    '<td><input type="text" class="form-control" id="t" name="t" ></td>'+   
    '<td><input type="text" class="form-control" id="ls" name="ls" ></td>'+
    '<td><input type="submit" class="btn btn-success" value="Bill" name="savesel"><br></td>'+                       
    '</tr>';
    $('.detail').append(tr);
}

$(function(){
    $('#add').click(function(){
        addnew();
    });
});
</script>