How can I add delete button into table's row inside script?

I have this code and I want to add delete button in each row of the table but my problem is the table inside the script … I want the delete row each row in the table to delete only row that button show in it

<div id = "data">
    <form id = "person">    
        Name: <select id = "locapavm" name = "pavlocation" >
        <option value="rami">rami</option>
        <option value="lara">lara</option>
        <option value="ahmed">ahmed</option>
        City: <select id="sevepavm" name="pavseverity">
    <option value="">- Severity -</option>
    <option value="Low">Low</option>
    <option value="Medium"> Medium</option>
    <option value="High">High</option>
<textarea id="planpavm" name="pavplan" ></textarea>
        <input id = "button" type = "button" value = " Reset " onclick = "ResetForm()">
        <input id = "button" type = "button" value = " Add " onclick = "AddData()">        

<h3>List Of Persons</h3>
<div id = "tab">
        <table id = "list" cellspacing = "0px" cellpadding = "20px" text-align = "center">



and this is the script

function AddData(){

            var rows = "";
            var name = document.getElementById("locapavm").value;
            var city = document.getElementById("sevepavm").value;
            var plan = document.getElementById("planpavm").value;

            rows += "<tr><td>" + name + "</td><td>" + city + "</td><td>" + plan + "</td><td><button onclick = "deleterow(id)">Delete</button></td></tr>";
            $(rows).appendTo("#list tbody");

    function ResetForm(){
   function deleterow(id){