Code to insert many of tables' rows into SQL at one time

1

I have the script which create rows of tables as the user add
and I trying to get all rows of this table to inserted to SQL database at once when user click on Submit
but my problem is when user click Submit only last row is insert into db
what should I do to insert whole table at once
this is the php code:

<?php
include_once("dbinfo.php");
session_start();
$name= $_SESSION['user'];
if(isset($_POST['savepav'])){
	 date_default_timezone_set("Asia/Riyadh");
  $pavdate= date("Y/m/d");
  $pavtime=date("h:i:sa");
  $pavloca=mysql_real_escape_string($_POST['pavlocation']);
  $pavtype=mysql_real_escape_string($_POST['ddlPassport']);
  $pavdist=mysql_real_escape_string($_POST['pavedist']);
  $pavplan=mysql_real_escape_string($_POST['pavplan']);
  $pavseve=mysql_real_escape_string($_POST['pavseverity']);
  $query="INSERT INTO `pevement`(`userName`, `plocation`, `pavType`, `padistr`, `pavplan`, `severity`, `pavdate`, `pavtime`) VALUES ('$name' ,'$pavloca', '$pavtype', '$pavdist' ,'$pavplan', '$pavseve', '$pavdate' ,'$pavtime')"; 
  $result_query=mysqli_query($conn,$query);
}
?>

this is the HTML code:

<html>
<div id="data">
    <form id="person" method="POST" action="/path/to/php/page.php">
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="col-12" style="width: 1514px">
	<select id = "locapavm" name = "pavlocation" style="width: 26%">
			<option value="">- Location -</option>
			<option value="Runway 17">Runway 17</option>
			<option value="Runway 35">Runway 35</option>
		    <option value="Runway 18">Runway 18</option>
		    <option value="Runway 36">Runway 36</option></select><br>
<select id = "ddlPassport" name = "ddlPassport" style="width: 26%" onchange = "ShowHideDiv()">
														<option value="">- Pavement Type -</option>
														<option value="Flexible Pavement (Asphalt)">Flexible Pavement (Asphalt)</option>
														<option value="Rigid Pavement (Concrete)">Rigid Pavement (Concrete)</option>
												</select></br>
<select id="pavdistrees" name="pavedist" style="width: 26%">
    <option value="">- Distress selections - </option>
</select><br> 
<div class="col-12" style="width: 1514px">
<select id="sevepavm" name="pavseverity" style="width: 26%">
	<option value="">- Severity -</option>
	<option value="Low" style="background-color: #29BB29">Low</option>
	<option value="Medium" style="background-color: yellow"> Medium</option>
	<option value="High" style="background-color: #FE4E4E">High</option>
</select><br> </div>
<!----------------------------------------------------------------------->
  <p class="auto-style1">Maintenance Plan:</p>  
   <textarea id="planpavm" name="pavplan" style="width: 572px; height: 129px" ></textarea><form action="index.php"  enctype="multipart/form-data">
                        <input type="file" name="wattachm"/>
                        </form><br> 
        <input id = "person" type = "reset"  value = " Reset " onclick = "ResetForm()">
        <input id = "button" type = "button" value=" Add " onclick = "AddData()">

    </form>
</div>
<div id = "tab" style="width: 76%">
        <table style="width: 96%" id = "list" cellspacing = "0px" cellpadding = "20px" text-align = "center">
            <thead>
                <tr>
                    <td>Location</td>
                    <td>Pavement Type</td>
                    <td>Type Distrees</td>
                    <td>Severity</td>
                    <td style="width: 396px">Maintenance Plan</td>
                </tr>
            </thead>

            <tbody>

            </tbody>
        </table>
</div>
</html>

and this is the script which create the table depend on the user choices :

<script>
function AddData() {
  var x = document.getElementById("pavdistrees").value;
  var y = document.getElementById("locapavm").value;
  var letters = '/^[a-zA-Z]+$/';
  if ((parseInt(x) != (x)) && (y == parseInt(y))) {
    alert("Wrong Value Entered");
  } else {
    var rows = "";
    var name = document.getElementById("locapavm").value;
    var gender = document.getElementById("ddlPassport").value;
    var age = document.getElementById("pavdistrees").value;
    var city = document.getElementById("sevepavm").value;
    var plan = document.getElementById("planpavm").value;

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

function ResetForm() {
  document.getElementById("person").reset();
}

function deleterow(el) {
  $(el).closest('tr').remove();
}
</scrpit>