I am creating a case / break loop to change what ul a new li will be created in. I have gotten pretty close but when I change the variable to reassign where the li should render the value stored in the variable stacks. Eventually you can only add the li to every ul there is an option for.

Here is the HTML

```
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
    <link href="https://fonts.googleapis.com/css?family=Anton|Baloo+Tammudu" 
rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-
1.9.1.min.js"></script>
    <script type="text/javascript" 
src="file:///C:/Users/Will/Desktop/JS_Test/script.js"></script>
</head>
<body>
    <div class=app>
        <div id=menu_container> <div id=menu_title> Menu </div>

            <input id="ListInput" /></input>

            <button id="AddToList">Add</button>

            </input>
              <select id="GroceryType" list=hosting-plan>
              <option>Select</option>
              <option name=produce value=1>Produce</option>
              <option name=baking value=2>Baking</option>
                <option name=meat value=3>Meat</option>
                <option name=dairy value=4>Dairy</option>
                <option name=frozen value=5>Frozen</option>
                <option name=etc value=6>Etc</option>

              </select>
        </div>

        <div id=list_container><div id=list_title> Grocery List </div>

        <div class=sublist_container>  

          <ul id="Produce">
Produce
          </ul>

          <ul id="Baking">
Baking
          </ul>

          <ul id="Meat">
Meat
          </ul>

          <ul id="Dairy">
Dairy
          </ul>

          <ul id="Frozen">
Frozen
          </ul>

          <ul id="Etc">
Etc
          </ul>

            </div>
        </div>             
    </div>
</body>

```

Then the script:

```
$(document).ready(function () {
$("#GroceryType").change(function () {
    let val = $(this).val();
    console.log(val);

    switch (val) {
        case '1':
        $('#AddToList').click(function(){
        $('#Produce').append($('<li>', {
     text: $('#ListInput').val()
            }));
    });

         break;

        case '2':
        $('#AddToList').click(function(){
        $('#Baking').append($('<li>', {
     text: $('#ListInput').val()
            }));
    });

         break;

         case '3':
        $('#AddToList').click(function(){
        $('#Meat').append($('<li>', {
     text: $('#ListInput').val()
            }));
    });

        break;

        case '4':
        $('#AddToList').click(function(){
        $('#Dairy').append($('<li>', {
     text: $('#ListInput').val()
            }));
    });

        break;

        case '5':
        $('#AddToList').click(function(){
        $('#Frozen').append($('<li>', {
     text: $('#ListInput').val()
            }));
    });

        break;

        case '6':
        $('#AddToList').click(function(){
        $('#Dairy').append($('<li>', {
     text: $('#ListInput').val()
            }));
    });

    } 
});

```

});

And finally some CSS:

```
            .app{
                width: 100%;
                height: 1400px;
                background-color: #d3c9bc;
                position:relative;

            }

            #menu_container, #list_container{
                position: absolute;
                top: 10em;
                width: 25em;
                    padding: 1em;
                background-color: #e59b80;
            }

            #menu_container{
                position:relative;
                left: 30%;
                height: 5em;
                top: 2em;

            }

            #menu_title{
                background-color: #e5e580;
                position: absolute;
                width:40%;
                left:32%;
                text-align:center;
            }

            #AddToList{
                position: absolute;
                top: 40%;
                left:10%;
            }

            #ListInput{
                position:absolute;
                top: 40%;
                left: 20%;
                width:60%;
            }

            #GroceryType{
                position: absolute;
                bottom: 15%;
                left:15%;

            }

            #list_title{
                background-color: #e5e580;
                position: absolute;
                width:40%;
                left:32%;
                text-align:center;
            }

            #list_container{
                top: 10em;
                left: 30%;
                min-height: 40em;
                max-height: 200em;
            }

            #Produce, #Meat, #Baking, #Dairy, #Frozen, #Etc{
                min-width: 10em;
                min-height:1em;
                background-color: #9fe580;
                overflow-wrap: break-word;
                word-break: break-word;
                word-wrap: break-word;
                hyphens: auto;

            }

            .sublist_container{
                position: absolute;
                top: 15%;
                left: 10%;
                height: 30em;
                width: 75%;
                background-color: #80e5b2;
            }

```

It almost works but I need the variable for the list types to only handle the events 1 option at a time.