My jQuery loop seems to be malfunctioning as it's not showing the values of my li elements. Instead, I'm seeing [object HTMLElement] in my input search bar.
<div id="sidebar-wrapper">
<input type="text" list="searchList" class="search" size="20" placeholder="Search..." />
<datalist id="searchList"> </datalist>
<ul class="sidebar-nav" id="menu">
<li>
<a id="item1" href="#item1">item1 </a>
</li>
<li>
<a id="item2" href="#item2">item2</a>
</li>
</ul>
</div>
<br>
$('.sidebar-nav li').each( function(index,item) {
var option = $('<option value="'+item+'">');
$('#searchList').append(option);
});