I am trying to insert data using Jquery ,Problem is that value is getting inserted but all records get replicated . I am very new to jquery kindly help

See more:

ASP.NET

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/JanniSurakshaYojna.master"
AutoEventWireup="true" CodeFile="frmPermanentStaffingTraining.aspx.cs" Inherits="ApplicationForms_frmPermanentStaffingTraining" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<%@ Register Src="../UserControls/Messagebox.ascx" TagName="Messagebox" TagPrefix="uc1" %>

<%-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
--%>

<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>

<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js" type="text/javascript"></script>

<title>Add/Remove dynamic rows in HTML table </title>

<script language="javascript">
function addRow(tableID) {

var table = document.getElementById(tableID);

var rowCount = table.rows.length;
var row = table.insertRow(rowCount);

var colCount = table.rows[0].cells.length;
var table = document.getElementById('dtPerStaff');

var oRows = table.getElementsByTagName('tr');
var iRowCount = oRows.length

for (var i = 0; i < colCount; i++) {

var newcell = row.insertCell(i);

newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch (newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}

function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;

for (var i = 0; i < rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if (null != chkbox && true == chkbox.checked) {
if (rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}


}
} catch (e) {
alert(e);
}
}

</script>

<script type="text/javascript">
function SaveRec() {

debugger;
var btnsave1 = document.getElementById('btnsave1')




var table = document.getElementById('dtPerStaff');
var oRows = table.getElementsByTagName('tr');
var iRowCount = oRows.length
var Category = document.getElementById('txtCategory')
var Sex = document.getElementById('txtSex');
var Qualification = document.getElementById('txtQual');
var Training = document.getElementById('txtTraining');
var Experience = document.getElementById('txtexperience');


var oRows = table.getElementsByTagName('tr');
var iRowCount = oRows.length;

if (Category.value == 0) {
alert('Category left empty !');
return false;
}
if (Sex.value == '') {
alert('Gender left empty !');
return false;
}
if (Qualification.value == '') {
alert('Qualification left empty !');
return false;
}
if (Training.value == '') {
alert('Training left empty !');
return false;
}
if (Experience.value == '') {
alert('Experience left empty !');
return false;
}
if (iRowCount <1) {
alert('Please fill Record !');
return false;
}


var JSONObject = new Array();


for (var i = 0; i < iRowCount; i++) {
var Tcells = table.rows[i].getElementsByTagName('td');
var obj = new Object();

obj.Category = Category.value;
obj.Sex = Sex.value;
obj.Qualification = Qualification.value;

obj.Training = Training.value;
obj.Experience = Experience.value;


JSONObject.push(obj);
}
$(document).ready(function() {
$.ajax({

type: "POST",
contentType: "application/json; charset=utf-8",
url: "frmPermanentStaffingTraining.aspx/SaveRecord",
// data: "{'Depid':'" + SelectedDepID + "','IssueDate':'" + txtIssuedate.value + "','Issueno':'" + txtIssueno.value + "'," + JSON.stringify({ classroom: JSONObject }) + "}",
data: JSON.stringify({ ItemIssuePrp: JSONObject }),
dataType: "json",
success: function(data) {
alert("Record Saved successfully !");


},
error: function(result) {
alert("Error");

}
});
});

}
</script>



<input type="button" value="Add Row" önclick="addRow('dtPerStaff')" />
<input type="button" value="Delete Row" önclick="deleteRow('dtPerStaff')" />



S.no


Category


Sex


CQualification


Training


Experience






<input type="checkbox" name="chk" id="chk1" />


<input type="text" name="Category" id="txtCategory" />


<input type="text" name="Sex" id="txtSex" />


<input type="text" name="Qualification" id="txtQual" />


<input type="text" name="Training" id="txtTraining" />


<input type="text" name="Experience" id="txtexperience" />



<input type="button" id="btnsave1" value="Save" onclick="SaveRec()" önclick="return btnsave1_onclick()" />