title: Add attributes to the selected list items in select2
body: <p><a href="https://jsfiddle.net/saffrons/cbwpvug0/" rel="nofollow noreferrer">Here</a> is a working jsfiddle. I wish to add attributes (in particular id) to the <code>&lt;li&gt;</code> elements created. My use case is slightly different from the fiddle, rather than using an array, I am getting my data from ajax. In addition I want to give my users flexibility to create new tags if the same are not present in database. To save newly created item list having id's is a much better handle than just plain classes. Can I modify the attributes of the <a href="https://i.stack.imgur.com/tzsAn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tzsAn.png" alt="enter image description here"></a><code>&lt;li&gt;</code> elements created?</p>
  
  <p>My actual code is something like this:</p>
  
  <pre><code>$(".js-data-example-ajax").select2({
          ajax : {
              url : "/content/search_skills",
              dataType : 'json',
              delay : 250,
              data : function(params) {
                  return {
                      q : params.term, // search term
                      page : params.page
                  };
              },
              processResults : function(data, params) {
                  params.page = params.page || 1;
  
                  return {
                      results : data.items,
                      pagination : {
                          more : (params.page * 5) &lt; data.total_count
                      }
                  };
              },
              cache : true
          },
          escapeMarkup : function(markup) {
              return markup;
          }, // let our custom formatter work
          minimumInputLength : 1,
          templateResult : formatRepo,
          templateSelection : formatRepoSelection,
          tags : true,
          createTag : function (params) {
              return {
                  id: params.term,
                  text: params.term,
                  newOption: true
                }
              },
      });
      function formatRepo(repo) {
          if (repo.loading)
              return repo.text;
  
          var markup = '&lt;ul class="list-group clear-list m-t"&gt;' + '&lt;li class="list-group-item fist-item"&gt;&lt;span class="pull-right"&gt;' + repo.id + '&lt;/span&gt; &lt;span class="label label-success"&gt;' + repo.count + '&lt;/span&gt; ' + repo.text + '&lt;/li&gt;';
  
          return markup;
      }
  
       function formatRepoSelection (repo) {
           var markup = repo.text;
           return markup;
            }
  </code></pre>
  
  <p>And my jsp (html) is:</p>
  
  <pre><code>&lt;select class="js-data-example-ajax" style="width: 100%" multiple="multiple"&gt;
      //Iterating through database query result to pre-load option items
      &lt;option value="&lt;%=skill_objective.get("id")%&gt;" selected="selected"&gt;&lt;%=skill_objective.get("id")%&gt; &lt;%=skill_objective.get("name") %&gt;&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>