Sure. I rewrote the script a little to do what you ask:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Add/remove table row</title>
</head>
<body>
<table class="dynamictbl" border="1">
<thead>
<tr>
<th>KEY</th>
<th>VALUE</th>
<th><button class="add">Add</button></th>
</tr>
</thead>
<tbody>
<tr class="prototype">
<td class="row1"><input type="text" name="key[]" value="" /></td>
<td class="row2"><input type="text" name="value[]" value="" /></td>
<td><button class="remove">Remove</button></td>
</tr>
</tbody>
</table>
<button id="save">Save contents</button>
<button id="insert">Insert some content</button>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
var $row = $("tr.prototype").clone().removeClass("prototype");;
$("table.dynamictbl button.add").on("click", function() {
$("table").append($row.clone());
});
$(document.body).on("click", "table.dynamictbl button.remove", function() {
$(this).parents("tr").remove();
});
$("#insert").on("click", function(){
var data = {keyvaluedata :{"url":"sampleurl","sleeptime":"3","browser":"firefox","surname":"smith"}}
$.each(data["keyvaluedata"], function(k, v){
var r = $row.clone();
r.find("td.row1 > input").val(k);
r.find("td.row2 > input").val(v);
$("table").append(r);
})
});
$("#save").click(function(){
var $rows = $("table.dynamictbl > tbody > tr");
var data = [];
$rows.each(function(index){
var r1 = $(this).find(".row1 > input[type=text]").val();
var r2 = $(this).find(".row2 > input[type=text]").val();
data.push([r1, r2]);
});
// Do your AJAX Magic here
console.log(JSON.stringify(data));
})
</script>
</body>
</html>