autocomplete only working for first input field - ajax

Question

I am trying to get autocomplete working on any div with the id="train" however, it seems to only be working on the first input field with a class of "train"
javascript code:
<script type="text/javascript">
$(document).ready(function() {
$(".train").each(function() {
$(".train").keyup(function() {
$("#suggest_q").html("");
var train = $(".train").val();
train = $.trim(train);
if(train)
{
$.ajax({
url: "train_ajax_query.php",
data: "train="+train,
success: function(msg) {
$("#suggest_q").html(msg);
$("#suggest_q ul li").mouseover(function() {
$("#suggest_q ul li").removeClass("hover");
$(this).addClass("hover");
})
$("#suggest_q ul li").click(function() {
var value = $(this).html();
$("#train").val(value);
$("#suggest_q ul li").remove();
});
}
});
}
});
});
});
</script>
HTML code:
<form id="train_create_form" name="train" action="submit_train.php" method="POST">
<input type="text" id="train" class="train" size="20" name="train[]" placeholder="Train 1" />
<div id="suggest_q">
</div>
<input type="text" id="train" size="20" class="train" name="train[]" placeholder="Train 2" />
<div id="suggest_q">
</div>
<input id= "submit_train" type="submit" name="submit_train" value="Submit All trains">
</form>
I found this old post but I am not sure how to adopt the fix for my problem :(
add more input fields code:
<script type="text/javascript">
$(function() {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').size() + 0;
$('#addScnt').live('click', function() {
$('<p><input type="text" id="train" name="train[]" class="train" placeholder="Train ' + i +'" /><div id="suggest_q"></div>Remove train</p>').appendTo(scntDiv);
i++;
return false;
});
$('#remScnt').live('click', function() {
if( i > 2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
</script>

Answer 1

Beause here:
$(".train").each(function() {
$(".train").keyup(function() {
you get every time only first field :) try:
$(".train").each(function(index, element) {
element.keyup(function() {
// or even: $(element).keyup(function() {
References:
Each
KeyUp
Val
I copypaste whole example:
<script type="text/javascript">
$(document).ready(function() {
$(".train").each(function(index, element) {
$(element).keyup(function() {
$("#suggest_q").html("");
var train = $(element).val();
train = $.trim(train);
if(train)
{
$.ajax({
url: "train_ajax_query.php",
data: "train="+train,
success: function(msg) {
$("#suggest_q").html(msg);
$("#suggest_q ul li").mouseover(function() {
$("#suggest_q ul li").removeClass("hover");
$(this).addClass("hover");
})
$("#suggest_q ul li").click(function() {
var value = $(this).html();
$(element).val(value);
$("#suggest_q ul li").remove();
});
}
});
}
});
});
});

Answer 2

Each time you type $(".train"), you're searching again for all the elements.
Once you've done your initial $(".train").each(function() { line, you can just use $(this) to refer to the element, and that function will get called on each element.
When you use var train = $(".train").val(); you are getting just the value of the first element. See http://api.jquery.com/val/ for more details on why.
If you remove that line and just use $(this) instead of '''train''' this should work better, but you will also want to get rid of the .each() around the .keyup(), since $(".train").keyup will already apply to all matching elements.
You're basically saying "go through and find all train elements. For each one, go through and set the keyup value on all train elements. Set it to a function which enforces autocomplete on the first train element". You want to be saying "Set the keyup callback on each train elements to enforce autocomplete on itself"