title: Append sub-elements to its parent element only
body: <p>I am trying to convert a bunch of menu dropdowns into multiple  elements. I have been able to do this when theres only one dropdown on the page but once I add the others, my script seems to run through each menu multiple times. I am new to Javascript/Jquery but I was wondering if there was a way to make it only input to its parent element?</p>
  <p>Here is my current script that works for a single dropdown:</p>
  <pre><code>$('.mylinks li').each(function() {
    var inputClass = $('.mylinks .link').html().toLowerCase();
    $('body').prepend('&lt;select class=&quot;'+inputClass+'&quot; onchange=&quot;window.location.href=this.options[this.selectedIndex].value&quot;&gt;&lt;/select&gt;');
    $('a').each(function() {
  
      var linkName = $(this).html();
      var linkVal = $(this).attr('href');
      $('select').append('&lt;option value=&quot;'+linkVal+'&quot;&gt;'+linkName+'&lt;/option&gt;');
    
    });
  });
  </code></pre>
  <h3>HTML</h3>
  
  <pre><code>&lt;div class=&quot;mylinks&quot;&gt;
    &lt;ul&gt;
      &lt;li&gt;
          &lt;a href=&quot;#&quot;&gt;Drop 1&lt;/a&gt;
          &lt;a href=&quot;http://geartrade.com&quot;&gt;Link 1&lt;/a&gt;
          &lt;a href=&quot;http://geartrade.com&quot;&gt;Link 2&lt;/a&gt;
          &lt;a href=&quot;http://geartrade.com&quot;&gt;Link 3&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href=&quot;#&quot;&gt;Drop 2&lt;/a&gt;
          &lt;a href=&quot;http://geartrade.com&quot;&gt;Link 1&lt;/a&gt;
          &lt;a href=&quot;http://geartrade.com&quot;&gt;Link 2&lt;/a&gt;
          &lt;a href=&quot;http://geartrade.com&quot;&gt;Link 3&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt; 
   &lt;/div&gt;
  </code></pre>
  <p>I have an example of this error here as well: <a href="http://jsfiddle.net/UdTcF/" rel="nofollow noreferrer">http://jsfiddle.net/UdTcF/</a></p>