Javascript: jQuery help getting <div> text from an append to new function for autocomplete (using OLEDB as souce)

Question

I'm still learning JS and jQuery, so don't hate on my coding too much! :P

Anyways, here's what I am trying to do:

• I have a database that has all cities and postal codes for a country.
• Some postal codes have multiple cities.
• I am first making an auto-complete for the postal code being entered that shows the cities for that postal code in an absolute positioned div. The div is created by a jQuery append to show all of the cities for that postal code. That is all working fine.
• Once I have the div showing the cities, when I click on a city name, it needs to move the name of that city to the ShipCity input box, then a separate function clears the div and hides it.

But this is where I'm running in to issues. Since I'm using a jQuery append to make the div, all the divs created have the same id. I can get the City input box to show a city name, but it only grabs the first one from the append, and not the one I am actually clicking on.

I have been working on this for 3 days now and am getting frustrated that I am this close but I can't complete it. :o

I hope this makes sense. Any help is appreciated. Here is the code:

Also, this is run from an .hta, and php is not an option. Has to be strictly css/html/js.

-CSS

#container {
    padding:2;
    color:black;
    border-spacing:0px;
    margin:1px;
    width:400px;
    height:400px;
    white-space:nowrap;
    float:left;
}

#container label {
    width:100px;
    padding:0;
    color:black;
    float:left;
    font-weight:bold;
    margin-right:5px;
    display:table-cell;
}
#container input {
    width:170px;
    padding:0;
    color:black;
    margin-left:5px;
    text-transform:uppercase;
    }
    #hiddenDiv { 
    display:none; 
    position:absolute; 
    border:1px solid;
    top:418px; 
    left:580px;
    width:250px;
    background-color:#FFCC00;
}

-JS

window.onload = function() {

// autocomplete : this is executed every time we change the text.
$( "#ShipZip" ).keyup(function() {
    var min_length = 3; // min caracters to display the autocomplete
    var keyword = $('#ShipZip').val();
    if (keyword.length >= min_length) {
        // do something as we type
        var recCountry = document.em.ShipCtry.value;
        var recZip = document.em.ShipZip.value;
        c = new ActiveXObject("ADODB.Connection");
        var strConn = "provider=sqloledb;data source=server\\name;database=name;uid=username;pwd=password";
        c.Open(strConn);

        var r = new ActiveXObject("ADODB.Recordset");
        var r2 = new ActiveXObject("ADODB.Recordset");
        var strQuery = "SELECT city_name, country_division_code FROM city_postarea WHERE '"+recZip+"' BETWEEN postcode_from AND postcode_to AND country_code='"+recCountry+"' ORDER BY city_name";
        var strCntQuery = "SELECT COUNT(city_name) as cnt FROM city_postarea WHERE '"+recZip+"' BETWEEN postcode_from AND postcode_to AND country_code='"+recCountry+"'";
        r.Open(strQuery, c);
        r2.Open(strCntQuery, c);
        if(r2.fields("cnt")>1) {
            while (!r.EOF) {
                var cityname=r.fields('city_name').value;
                $("#hiddenDiv").append('<div class="popUp" id="zippy" name="'+recZip+'">'+recZip+', '+cityname+'</div>');
                $("#hiddenDiv").css("display", "block");
                r.movenext();
            }

        }
        close.strConn;      
    } else {
        // hide city list
        $('#hiddenDiv').empty();
        $('#hiddenDiv').hide();
    }
})
// this function will be executed when we select an item
$('#hiddenDiv').click(function() {
    // change input value
    dog=$("#zippy").html();
    dog=dog.split(", ").pop();
    $('#ShipCity').val(dog);
    // hide the popup
    $('#hiddenDiv').empty();
    $('#hiddenDiv').hide();
}); 

}

-HTML

<div id='hiddenDiv'>
</div>

    <label>Zip: <span class='ast' style='color:#FF0000'>*</span></label>
        <input name='ShipZip' class='input' type='text' id='ShipZip' /><br />

    <label>City: <font color='#FF0000'>*</font></label>
        <input name='ShipCity' class='input' type='text' id='ShipCity' /><br />

Answer 1

So I fixed it by this beautiful, simple, one line of code...

city=$(this).attr("id");