JavaScript Not working perfectly

JavaScript Not working perfectly

JavaScript
$(document).ready(function(){
$('#data1').change(function(){
title = $('#title1').val();
url = $('#url1').val();
$.post('library/edit.php',{title:title, url:url},function(res){
alert ("updated !");
});
});
});
HTML
<div id="data1">
<input name="title1" type="text" id="title1" />
<input name="url1" type="text" id="url1" />
</div>
I wrote that code to call to php file on change of textbox. that code is
perfect and working fine!!!
now i got more text boxes,
<input name="title1" type="text" id="title1" />
<input name="url1" type="text" id="url1" />
<input name="title2" type="text" id="title2" />
<input name="url2" type="text" id="url2" />
<input name="title3" type="text" id="title3" />
<input name="url3" type="text" id="url3" />
now the what i required is, if any one change the content in title2 i need
to pass that value to js function...
then the title 1 should be title 2 (title = $('#title1').val();) and
then the url 1 should be url 2 (url = $('#url1').val();)
(these text box numbers are dynamic)