How to add html table values to database using ajax

See more:

HTML

PHP

MySQL

jQuery

jsrender.js

I have a table whose rows are dynamically added. The problem arises when im trying to send data in each row when the submit button is clicked. I would like all the data in each row to be saved to the database when the submit button is clicked but that is not working at the moment. I am still struggling to understand how ajax works so if you could kindly help out. thanks.
I have the following function so far:

My HTML table:

<form id="ObsForm" method="POST" action="saveObstacles.php">
<table style="width:100%;">
<thead>
<tr>
<th></th><th></th><th>Obstacle</th><th>Likelihood</th><th>Severity</th><th>Principal</th><th>RiskOfObstacle</th><th>ValueOfObstacle</th>
</tr>
</thead>
<tbody id="MyTable">
</tbody>
</table>
</form>
<div class="controls">
<button class="save">Save</button><button class="addRow">Add Obstacle</button>
<input type="submit" name="submit" id="submit" value="submit"> <!-- value="submit" id="submit"> -->
<div id="saveWrapper">
<label>Saved Obstacles:</label></br>
<div id="savedDiv"></div>
</div>
</div>
</article>
</div>

The script for table:

<script class="rowItem" type="text/x-jsrender">
<tr>
<td><button class="remove">remove</button></td>
<td><input name="chkbox[]" type="checkbox" /></td>
<td><textarea class="Obstacle" name="Obstacle[]" data-link="Obstacle" cols="20"></textarea></td>
<td>
<select class="Likelihood" name="Likelihood[]" data-link="Likelihood">
<option value="0.12">Low</option><option value="0.39">Medium</option><option value="0.49">High</option>
</select>
</td>
<td>
<select class="Severity" name="Severity[]" data-link="Severity">

<option value="0.12">Low</option><option value="0.39">Medium</option><option value="0.49">High</option>
</select>
</td>
<td><input class="Principal" name="Principal[]" data-link="Principal" required="" placeholder="102.5" type="text" /></td>
<td><input class="ObsRisk" name="ObsRisk[]" data-link="ObsRisk" readonly="" type="text" /></td>
<td><input class="ObsValue" name="ObsValue[]" data-link="ObsValue" readonly="" type="text" /></td>
</tr>
</script>

and obviously I have the addrow() function which works well. This function is called when the save button is clicked:

$("#submit").click(function(e) {
e.preventDefault();
var obsName = $("#Obstacle").val();
var likeli = $("#Likelihood").val();
var sever = $("#Severity").val();
var princ = $("#Principal").val();
var risk = $("#ObsRisk").val();
var value = $("#ObsValue").val();
var dataString = 'obsName='+Obstacle+'likeli='+Likelihood+'sever='+Severity+'princ='+Principal+'risk='+ObsRisk+'value='+ObsValue;
$.ajax({
type:'POST',
data:dataString,
url:'saveObstacles.php',
success:function(data) {
alert(data);
}
});
});

finally my php code looks like this:

<?php
$user = $_SESSION['user']['UserName'];
$sql = "INSERT INTO obstacles (ObstacleID, Principal, ObstacleDescription, Uncertainty, Severity, UserName, ComplianceID)VALUES (:ID, :principal, :obstacleDec, :likelihoodScale, :severityScale, :aUser, :compID)";
$stmt = $db->prepare($sql);

for ($i=0; $i<count($_POST['Obstacle']); $i++) {
$values = array(':ID'=>'',':principal'=>$_POST['Principal'][$i], ':obstacleDec'=>$_POST['Obstacle'][$i],':likelihoodScale'=>$_POST['Likelihood'][$i], ':severityScale'=>$_POST['Severity'][$i], ':aUser'=>$user, ':compID'=>'');
//var_dump($values);
try{
$result= $stmt->execute($values);}catch(PDOException $ex){
die("Failed to run query: " . $ex->getMessage());}
}

header("Location: obstacles.php");
die("Redirecting to obstacles.php");