title: click event being removed on previous elements
body: <p><strong>answer:</strong></p>
  
  <pre><code>/* I bound the events via the parent instead of binding it 
     on each span tag individually. this allowed me to manipulate
     the span tags uniquely. ( thank you Jason P ) */
  $( '.selected-option-wrapper' ).on( 'click', 'span', function() { });
  </code></pre>
  
  <hr>
  
  <p><strong>disclaimer:</strong></p>
  
  <p>I am losing my mind.</p>
  
  <p><strong>details:</strong></p>
  
  <p>I am trying to list in <code>html</code> a bunch a options that a user selected via a <code>ul/li</code> dropdown. I want the user to click on a <code>li a</code> and have part of the html within the a tag, placed in a separate <code>div</code>. </p>
  
  <p>For example: </p>
  
  <p><strong>html</strong></p>
  
  <pre><code>// html within the li tag that I want cloned over
  &lt;a id="met" class="item-1" href="#"&gt;
      &lt;div class="left check-wrapper"&gt;
          &lt;span class="gicon-ok"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="hide item-display"&gt; // exact element to be moved over
          &lt;span class="gicon-remove-sign left remove-option-item"&gt;&lt;/span&gt;
      &lt;div class="left"&gt;Metallic Thread&lt;/div&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p><strong>javascript</strong></p>
  
  <pre><code>$( '.options' ).find( 'a' ).on( 'click', function( e ) {
  
      ind_option_html = $( this ).find( '.item-display' ).clone();
  
      /* attach a click event to the span tag */
      ind_option_html.find( 'span' ).on( 'click', function() { 
          console.log( this );
      });
  
      /* this is in a $.each loop that appends each new ind_option_html */
      $( '.selected-option-wrapper' ).show().append( ind_option_html );
  
  });
  </code></pre>
  
  <p><strong>problem</strong></p>
  
  <p>whenever I click just one <code>li a</code> the function fires fine, the <code>this</code> for the <code>span</code> tag is logged out. but what is amazing is that when a user clicks another <code>li a</code> the <code>click</code> event is placed on ONLY the most recent <code>span</code> tag. </p>
  
  <p>Where is the <code>onclick</code> event going with the first <code>span</code> tag? </p>