I am making a table in which you can add aditional rows. When you add a row you can either save it or cancel it, by clicking cancel the row will be removed. It works with one row but when I create like six of them and click cancel the selected row wont be removed but the last row will. Here my Code so far. Does anyone know what I'm doing wrong?
<head>
<script src="../jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".edit").click(function() {
var id = $(this).attr("id");
alert("edit "+id);
});
$(".delete").click(function() {
var id = $(this).attr("id");
alert("delete "+id);
});
$("#newbutton").click(function() {
var randomnumber=Math.floor(Math.random()*100);
$("tr:last").after("<tr id="+randomnumber+"><td><form><input style='width: 80%'></form></td><td class=ok>OK</td><td id="+randomnumber+" class=cancel>Cancel</td></tr>").ready(function() {
$("tr td .cancel").click(function() {
$(this).remove();
});
$(".ok").click(function() {
alert("OK!");
});
});
})
});
</script>
</head>
<table border=1 id=table>
<tr><th>Name</th></tr>
<tr><td>Bombai</td><td id=1 class=edit>edit</td><td id=1 class=delete>delete</td></tr>
<tr><td>London</td><td id=2 class=edit>edit</td><td id=2 class=delete>delete</td></tr>
<tr><td>Rom</td><td id=3 class=edit>edit</td><td id=3 class=delete>delete</td></tr>
</table><label id=newbutton>New Place</label>