How to do auto complete for same class - php

Question

The textarea will show when I click add row. The textarea has item in autosuggestion on keyup. My problem is the first one shows autocomplete. anothers are not working
<textarea id="name" class="name" name="name"></textarea><ul></ul>
<textarea id="name" class="name" name="name"></textarea><ul></ul>
<textarea id="name" class="name" name="name"></textarea><ul></ul>
<script type="text/javascript">
$(document).ready(function(){
$(".name").keyup(function(){
var name = $(this).val();
$.ajax({
url:"ajax.php",
type:"POST",
data:{name:name},
success:function(res)
{
$(".name + ul").append("<li class=item>"+res+"</li>");
}
});
});
$("ul").on("click", "li", function(){
var item = $(this).text();
$(".name").val(item);
$("ul li").remove();
});
});
</script>

Answer 1

Here is an example that does not need any id associated with the text areas.
<textarea class="name" name="name1"></textarea><ul></ul>
<textarea class="name" name="name2"></textarea><ul></ul>
<textarea class="name" name="name3"></textarea><ul></ul>
<script type="text/javascript">
$(document).ready(function(){
$(".name").keyup(function(){
var field = $(this);
var name = field.val();
$.ajax({
url:"ajax.php",
type:"POST",
data:{name:name},
success:function(res)
{
field.next("ul").append("<li class=item>" + res + "</li>");
}
});
});
$("ul").on("click", "li", function(){
var li = $(this);
var item = li.text();
li.parent('ul').empty().prev('.name').val(item);
});
});
</script>

Answer 2

try
var name = $(this).val();
var data = name + "&Sessid=" + Math.random();
$.ajax({
url:"ajax.php",
type:"POST",
data:data,
success:function(res)
{
$(".name + ul").append("<li class=item>"+res+"</li>");
}
});
});

Answer 3

First of all, change id and name fields for your textarea. It's not good idea to give same id name to your elements.
<textarea id="name1" class="name" name="name1"></textarea><ul></ul>
<textarea id="name2" class="name" name="name2"></textarea><ul></ul>
<textarea id="name3" class="name" name="name3"></textarea><ul></ul>
Now, get id name by this:
var which_id = $(this).attr('id');
And use which_id variable to your ajax response.
$.ajax({
url:"ajax.php",
type:"POST",
data:{name:name},
success:function(res)
{
$("#"+which_id+" + ul").append("<li class=item>"+res+"</li>");
}
});