title: save id´s of selected element´s
body: <p>hey there i have little list here:</p>
  
  <pre><code>&lt;ul id="selectable"&gt;
  &lt;li id='id.00'&gt;&lt;/li&gt;
  &lt;li id='id.10'&gt;&lt;/li&gt;
  &lt;li id='id.20'&gt;&lt;/li&gt;
  &lt;li id='id.30'&gt;&lt;/li&gt;
  &lt;li id='id.40'&gt;&lt;/li&gt;
  &lt;li id='id.50'&gt;&lt;/li&gt;
  &lt;li id='id.60'&gt;&lt;/li&gt;
  &lt;li id='id.70'&gt;&lt;/li&gt;
  &lt;li id='id.80'&gt;&lt;/li&gt;
  &lt;li id='id.90'&gt;&lt;/li&gt;
  &lt;/ul
  </code></pre>
  
  <p>and i am able to select one or more of those listelement´s using css:</p>
  
  <pre><code>ul {overflow:hidden;}
  #selectable .ui-selecting { background: #FECA40; }
  #selectable .ui-selected { background: black; color: white; }
  #selectable { list-style-type: none; margin: 0; padding: 0; width: 300px; }
  #selectable li {float: left; width: 30px; height: 20px; background-color: none; display:block; }
  </code></pre>
  
  <p>and now i want to save the id´s of all selected element´s using jquery:</p>
  
  <pre><code>$(function() {
      $( "#selectable" ).selectable({
          stop: function() {
              var result = $( "#select-result" ).empty();
              $( ".ui-selected", this ).each(function() {
                  var index = $(this).attr('id');
                  result.append( index );
                  alert(index);
              });
          }
      });
  });
  </code></pre>
  
  <p>ok so far so good:
  When i select e.g. four listelements, they get marked, BUT: only the last id is saved.
  For example, when i select this listelement´s:</p>
  
  <pre><code>&lt;li id='id.00'&gt;&lt;/li&gt;
  &lt;li id='id.10'&gt;&lt;/li&gt;
  &lt;li id='id.20'&gt;&lt;/li&gt;
  &lt;li id='id.30'&gt;&lt;/li&gt;
  </code></pre>
  
  <p>only the id: "id.30" is safed in my variable "index".
  How can i get my jquery to safe all id´s of selected elements and not just the last one? greetings!</p>