How to call icons from multiple icons in jquery?

Question

I have these js code;

 $(document).ready(function() {
      $.getJSON("Stations.php", function(jsonData){  
      $.each(jsonData, function(key,value) {
      $('#selectStation')
     .append($("<option></option>")
     .attr("value",key)
     .text(value.name)); 

  });
 });
 });
function sta_callStation(sel){
  $('#noOfPassengers, #infoOfPassengers, #distType,#distParams').empty();
   $('#sta_numberOfIcons').empty();
    $.getJSON('Stations.php', function(station){

        $.each(station, function(sta_key, sta_value) {

        if(sel.value==sta_key)
        {
          $.each(sta_value.passengers, function(j,passengers) 
        {

          //$('#sta_numberOfIcons').append('<i class="icon-user" ></i>');
          var pas_icon = document.createElement("a");
          pas_icon.className = "icon-user";
          pas_icon.id='id_'+(j);
          pas_icon.setAttribute('href', '#');
          pas_icon.setAttribute('rel', 'popover');
          //alert('id_'+(j));
          document.getElementById('sta_numberOfIcons').appendChild(pas_icon); 


      });
        }
  });

  });
  }

Here is some html part:

Stations
 <select name="selectStation" id="selectStation" onchange="sta_callStation(this);">   
 </select>

First when the page is loaded the combobox is filled with Station 1 ,Station2 etc.The when I want to select one of them (this refer 1, 2, 3, 4 or 5 ) I am calling sta_callStation function.I dynamically create person icons giving them some attributes, for example their ids; id_1 ,id_2 etc.But after that how can I trigger them when mouse over, should I use class or id of them? Before choosing station: https://docs.google.com/file/d/0B1RbKsJ4B8eoeW5wdWhLQW85QTQ/edit?usp=sharing After choosing one station(randomly produced passengers in php) https://docs.google.com/file/d/0B1RbKsJ4B8eoQmYwWVpYbno2NnM/edit?usp=sharing

Answer 1

You could use some client side UI framework (eg. Knockout.js).

If you would like to keep your UI rather simple, then yes as you said, you could create class with person attributes and appended reference to icon HTML element. When creating instance of class, link HTML callback function to your object function.

Somethig like this:

var PassInfo = function (name)
{
  name: name,
  onhover: function ()
  {
    // do something special
  }
};

var passInstance = new PassInfo('passenger1');

$(pas_icon).hover(function()
{
  passInstance.onhover();
});