title: Simple jQuery loop through <li> element and add to <datalist>
body: <p>Something's wrong with my jQuery loop, it's not displaying the values of my li elements. I'm getting something like [object HTMLElement] in my input search bar.</p>
  
  <pre><code>&lt;div id="sidebar-wrapper"&gt;
     &lt;input type="text" list="searchList" class="search" size="20" placeholder="Search..." /&gt; 
      &lt;datalist id="searchList"&gt; &lt;/datalist&gt;
  
          &lt;ul class="sidebar-nav" id="menu"&gt;
  
              &lt;li&gt;
                  &lt;a id="item1" href="#item1"&gt;item1 &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a id="item2" href="#item2"&gt;item2&lt;/a&gt;
              &lt;/li&gt;
  
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;br&gt;
  
   $('.sidebar-nav li').each( function(index,item) {
          var option = $('&lt;option value="'+item+'"&gt;');
          $('#searchList').append(option);
      });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/QUWmx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QUWmx.png" alt="enter image description here"></a></p>