I'm trying to sort some items in a list by name a-z/z-a and or price low/high by using a dropdown option. 
The price uses a < h1 > and the name uses a < class ="item" > tag.

I've looked around but it looks like not many people use a drop down < option > menu. 
I'm not strong in JS...but I'd love to learn from you all! 

```js
function price() {
  document.getElementById("list");

}

function name() {
  document.getElementById("list");

}
```

```html
<div id="sort">
<p>Sort by</p>
<select>
<optgroup label= "Price"/>
<option value="low" onclick="price()">Price - Low </option>
<option value="high" onclick="price()">Price - High </option>
<optgroup label= "Name"/>
<option value="name"onclick="Name()">Name A - Z</option>
<option value="nameRev" onclick="name()">Name Z - A</option>
</select>
</div>

<ul>
<li><h1>$1 </h1><h2 class="item">B </h2></li>
<li><h1>$7 </h1><h2 class="item">A </h2></li>
<li><h1>$8 </h1><h2 class="item"> H</h2></li>
<li><h1>$11 </h1><h2 class="item">F</h2></li>
<li><h1>$5 </h1><h2 class="item">N </h2></li>
<li><h1>$7</h1><h2 class="item">M </h2></li>
<li><h1>$6</h1><h2 class="item">C </h2></li>
<li><h1>$9 </h1><h2 class="item">G </h2></li>
<li><h1>$4</h1><h2 class="item">I </h2></li>
<li><h1>$10</h1><h2 class="item">D </h2></li>
<li><h1>$5</h1><h2 class="item"> J</h2></li>
<li><h1>$2 </h1><h2 class="item">E </h2></li>
<li><h1>$3</h1><h2 class="item">K </h2></li>
<li><h1>$1.1 </h1><h2 class="item">L </h2></li>

<li><h1>$12 </h1><h2 class="item">ZB </h2></li>
<li><h1>$34 </h1><h2 class="item">AA </h2></li>
<li><h1>$56 </h1><h2 class="item"> VH</h2></li>
<li><h1>$74 </h1><h2 class="item">BF</h2></li>
<li><h1>$865 </h1><h2 class="item">BN </h2></li>
<li><h1>$35</h1><h2 class="item">CM </h2></li>
<li><h1>$87</h1><h2 class="item">CC </h2></li>
<li><h1>$65 </h1><h2 class="item">FG </h2></li>
<li><h1>$45</h1><h2 class="item">YI </h2></li>
<li><h1>$53</h1><h2 class="item">WD </h2></li>
<li><h1>$64</h1><h2 class="item"> KJ</h2></li>
<li><h1>$53</h1><h2 class="item">QE </h2></li>
<li><h1>$74</h1><h2 class="item">QK </h2></li>
<li><h1>$72 </h1><h2 class="item">YL </h2></li>
</ul>
```

Here's what I've got: