<script src=" https://code.jquery.com/jquery-3.2.1.js" type="text/javascript"></script>
<script>
var i=0;
currentRow = null;
$("button#savebutton").click(function(){
var cat = $("#cat-list").val();
var display = $("#displayname").val();
var subcat = $("#subcat-list").val();
var order = $("#privilage").val();
i++;
var new_row = "<tr id='row"+i+"' class='info'><td class='cat'>" + cat + "</td><td class='display'>" + display + "</td><td class='type'>" + subcat +"</td><td>"+order +"</td><td><span class='editrow'><a class='fa fa-edit' href='javascript: void(0);'>Edit</a></span></td><td><span class='deleterow'><a class='glyphicon glyphicon-trash' href=''>Delete</a></span></tr>";
if(currentRow){
$("table tbody").find($(currentRow)).replaceWith(new_row);
currentRow = null;
}
else{
$("table tbody").append(new_row);
}
});
$(document).on('click', 'span.deleterow', function () {
$(this).parents('tr').remove();
return false;
});
$(document).on('click', 'span.editrow', function () {
currentRow= $(this).parents('tr');
});
</script>
<script>
$(document).ready(function(){
$("#secondbtn").click (function(){
var category = $("#cat-list").val();
var display = $("#displayname").val();
var subcat = $("#subcat-list").val();
var privilage = $("#privilage").val();
alert(category);
$.ajax({
type:"POST",
url:"query1.php",
data:{display:display_name,category:category,subcat:pagename,privilage:privilage},
success:function(data){
alert("successfully updated");
}
});
});
});
</script>
&#13;
<html>
<body>
<form method="POST" action="">
<label>Select your Category:</label>
<input type="text" id="cat-list"/>
</br>
<label> Display Name:</label>
<input type="text" name="display_name" id="displayname" d />
</div>
<label> Select your Subcategory:</label>
<input type="text" id="subcat-list" >
<label>Set Order</label>
<select name="privilage" id="privilage" required>
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>
<div class="col-md-12">
<div class = "panel1">
<button type="button" class="btn btn-success savebtn" style="padding: 6px 12px;margin-left: 40%;" id="savebutton" onclick="getFirstClicked()" ><i class="icon-check-sign" aria-hidden="false"></i>Add</button>
</div>
</div>
</form>
<form class="form-horizontal" role="form" id="chargestableForm">
<div class="col-md-12">
<table id="pTable" class="table table-hover" width="100%" cellspacing="0" style="border: 1px; height:10px;" >
<thead style="background-color:#CCE5FF">
<tr>
<th>Category</th>
<th>DisplayName</th>
<th>Subcategory</th>
<th>Order</th>
<th colspan=2>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class = "panel2">
<button type="submit" name="import" id="secondbtn" > Import Database</button>
</div>
</div>
</form>
&#13;