Button name show on newly created row

Button name show on newly created row

Dear All

Below is my code for dynamically add delete rows. i want to put the name of button on my first column

what should i do to do this.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {




    function addRow() {
   

   
        var html = '<tr>' +
                    '<td width="100px"></td>' +
                    '<td width="100px"><input type="text" name="qty" /></td>' +
                   
                    '<td><input type="button" class="BtnMinus" value="-" /></td>' +
                    '</tr>'
        $(html).appendTo($("#Table1"))
    };
    $(".BtnPlus").click(addRow);
   
   
    function deleteRow() {
    var par = $(this).parent().parent();
    par.remove();
};
$("#Table1").on("click", ".BtnMinus", deleteRow);



});

</script>


</head>

<body>


<input type="button" id="mytext" name="Add" class="BtnPlus" value="+" />
<input type="button" id="mytext" name="Add2" class="BtnPlus" value="++" />
<input type="button" class="BtnMinus" value="-" />





<table id="Table1" >
    <tr>
        <td width="100px">Item Name
           
        </td>
        <td width="100px">
        Quantity
           
        </td>
       
    </tr>
</table>

</body>
</html>