javascript - CSS クラスを使用して動的にアイコンを作成するにはどうすればよいですか?

Question

Ajax getJSON関数を使用して、phpファイルから乗客のIDを取得しています.phpから来る乗客の数によって定義されたアイコンの数、およびアイコン(外観と同じ)をhtmlページに表示する必要があります.アイコンは私はbootstap popoverを使用しているため、呼び出し可能である必要があります. ここでは、コンボボックスを初期化します。

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

  });
});
});

ここに私が試したjsコードがあります.htmlの選択オプションから呼び出され、ステーションを選択します:

function sta_callStation(sel){
  $('#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>')
          });
        }
  });

  }
  );
  }

sel は Stations.php からステーション ID (1 から 5) を渡すためのパラメーターです。この関数を選択オプション タグから呼び出しています。sta_value.passengers からは、数字 (1 から 20 まで、ランダムに生成されます) だけが各乗客のアイコンに対して返されます。ここでは、アイコンは同じプロパティを持っていますが、ポップオーバー機能のためにそれらを呼び出した後、乗客 ID に応じて異なるものにしたいと考えています。ここにhtmlコード部分：

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

      <div id="noOfPassengers"><strong>İstasyondaki Yolcu Sayısı:</strong></div>

      <a href="#" id="sta_numberOfIcons" rel="popover" class="pas_icon"> </a>

ありがとう。