Getting to the correct ul
<p>I have to add new element when the + button is clicked and the element should go to the unordered list from that <code>div</code>. Every time when i click the the <code>+</code> button the element goes to the last <code>div</code> i have created.I know my mistake is that <code>ul</code> in my <code>javascript</code> is an array of uls but do not know how to fix it.I think i have to use <code>this</code> key word but dont get it how. Can someone more experienced give me some advice?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let check = (function(){
   
    function isActive (elem) {
        if(elem.checked == true){
            elem.parentNode.style.backgroundColor = 'forestGreen';
        }else{
            elem.parentNode.style.backgroundColor = 'white';
        }
    }
   
    return {
        isActive: isActive
    }
   
})();
   
 
let section = (function(){ 
 
    function Section(){
        //create section div
        let newDiv = document.createElement('div');
        newDiv.setAttribute('class', 'wrapper');
        let wrapper = document.getElementsByClassName('wrapper');
        let len = wrapper.length-1;
        wrapper[len].parentNode.appendChild(newDiv);
       
        //create div for list items
        let innerDiv = document.createElement('div');
        innerDiv.setAttribute('id', 'business');
        newDiv.appendChild(innerDiv);
       
        //create title
        let title = document.createElement('h3');
        let txtTitle = document.getElementById('title').value;
        let createTitle = document.createTextNode(txtTitle);
        title.appendChild(createTitle);
        title.setAttribute('tag','h3');
        innerDiv.appendChild(title);
       
        //create new Unordered List
        let newUl = document.createElement('ul');
        newUl.setAttribute('tag', 'ul');
        innerDiv.appendChild(newUl);
       
        //create add button
        let btn = document.createElement('input');
        btn.setAttribute('type', 'button');
        btn.setAttribute('value', '+');
        btn.setAttribute('class', 'rightInputs');
        newDiv.appendChild(btn);
        btn.setAttribute('onclick', 'section.createElement()');
       
        //create field for the elements
        let txtField = document.createElement('input');
        txtField.setAttribute('value', 'Add item...');
        txtField.setAttribute('type', 'text');
        txtField.setAttribute('class', 'rightInputs');
        txtField.setAttribute('onMouseOver', 'clearContent(this)');
        newDiv.appendChild(txtField);
    }
 
    function createElement(){
        //create LI
        let elem = document.createElement('li');
        let inputs = document.getElementsByClassName('rightInputs');
        let lastInp = inputs[inputs.length-1].value;
        let txtLi = document.createTextNode(lastInp);
        let ul = document.getElementsByTagName('ul');
        //create checkbox
        let chBox = document.createElement('input');
        chBox.setAttribute('type', 'checkbox');
        chBox.setAttribute('onclick', 'check.isActive(this)');
        //------------
        elem.setAttribute('tag', 'li');
        elem.appendChild(chBox);
        elem.appendChild(txtLi);
        ul[ul.length-1].appendChild(elem);
    }
 
    function addToDOM(){
        return new Section();
    }
   
    return {
        addToDOM: addToDOM,
        createElement: createElement
    }
   
})();
 
function clearContent(elem){
    if(elem.value == 'Add item...' || elem.value == 'Title..'){
        elem.value = '';
    }
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#mainDiv {
    width: 500px;
    height: 600px;
    border: 2px solid black;
    margin: auto;
}
 
h1{
    text-align: center;
}
 
#title{
    width: 150px;
    color: black;
    margin-left: 20px;
}
 
#addSection {
    margin-left: 10px;
}
 
#container {
    overflow: auto;
    width: 450px;
    height: 450px;
    border: 5px double gray;
    margin-bottom: 20px;
    margin-left: 20px;
}
 
#shoppingList {
    overflow: auto;
    width: 375px;
    height: 165px;
    border: 1px solid black;
    margin: auto;
    margin-top: 20px;
}
 
#business {
    overflow: auto;
    width: 375px;
    height: 165px;
    border: 1px solid black;
    margin: auto;
    margin-top: 20px;
}
 
ul {
    margin-top: 5px;
    padding-right: 10px;
    padding-left: 10px;
    list-style: none;
}
 
li {
    border-bottom: 1px solid black;
    width: 100%;
}
 
input {
    margin-top: 10px;
    margin-bottom: 10px;
}
 
.rightInputs {
    float: right;
    margin-right: 20px;
}
 
h3 {
    text-align: right;
    margin: 10px 10px 0px 0px;
}
 
.wrapper {
    width: 400px;
    height: 250px;
    margin: auto;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='mainDiv'&gt;
        &lt;h1&gt; Tuesday &lt;em&gt;TODO&lt;/em&gt; List &lt;/h1&gt;
        &lt;div id='container'&gt;
                &lt;div class='wrapper'&gt;  
                    &lt;div id='shoppingList'&gt;
                        &lt;h3&gt; Shopping List &lt;/h3&gt;
                        &lt;ul id='forShopping'&gt;
                            &lt;li&gt;&lt;input type='checkbox' onclick='check.isActive(this)'&gt; Air-freshener&lt;/input&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;input type='checkbox' onclick='check.isActive(this)'&gt; Pampers&lt;/input&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;input type='checkbox' onclick='check.isActive(this)'&gt; Newspapper&lt;/input&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;input type='checkbox' onclick='check.isActive(this)'&gt; Toilet paper&lt;/input&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/div&gt;
                    &lt;input class='rightInputs' type='button' value='+' onclick='section.createElement()'/&gt;
                    &lt;input class='rightInputs' type='text' value='Add item...'
                            onMouseOver='clearContent(this)'/&gt;
                &lt;/div&gt;
                &lt;div class='wrapper'&gt;
                    &lt;div id='business'&gt;
                        &lt;h3&gt; Business List &lt;/h3&gt;
                        &lt;ul id='forBusiness'&gt;
                            &lt;li&gt;&lt;input type='checkbox' onclick='check.isActive(this)'&gt; Inspect fiscal year report&lt;/input&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;input type='checkbox' onclick='check.isActive(this)'&gt; Lunch with board of directors&lt;/input&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;input type='checkbox' onclick='check.isActive(this)'&gt; Fire Jackson&lt;/input&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;input type='checkbox' onclick='check.isActive(this)'&gt; Take a nap&lt;/input&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;input type='checkbox' onclick='check.isActive(this)'&gt; Arrange meeting with investors&lt;/input&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/div&gt;
                    &lt;input class='rightInputs' type='button' value='+' onclick='section.createElement()'/&gt;
                    &lt;input class='rightInputs' type='text' value='Add item...'
                            onMouseOver='clearContent(this)'/&gt;
                &lt;/div&gt;
        &lt;/div&gt;
        &lt;input id='title' type='text' value='Title..' onMouseOver='clearContent(this)'/&gt;
        &lt;input id='addSection' type='button' value='New Section' onclick='section.addToDOM()'/&gt;
    &lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><a href="http://pastebin.com/6KybFxaM" rel="nofollow noreferrer">HTML code</a></p>

<p><a href="http://pastebin.com/4pArc2kV" rel="nofollow noreferrer">JavaScript code</a></p>

<p><a href="http://pastebin.com/R5U2PieG" rel="nofollow noreferrer">CSS code</a></p>