Adding/Removing Search filters dynamically with jQuery
<p>I'm currently trying to build a post filter section into a website and need some help with the JavaScript/jQuery that goes along with it. Below you can see an example of the layout visually and the html layout. </p>

<p>The sequence of events will go as follows: </p>

<ul>
<li>User selects from the top list of filters (bottom tags are not visible until selected)</li>
<li>Once selected the "selected tag filter disappears from the top list and is added to the bottom ("circular tags")".</li>
<li>the user can also delete the tags and they will return to the top list of filters.</li>
</ul>

<p>The way I imagined this working: </p>

<p>Selecting a filter </p>

<ul>
<li>check for "checked checkbox"</li>
<li>add selected "checkbox" label + value attribute to an array</li>
<li>get the last values added to the array and create new filter tag underneath under content tag container</li>
</ul>

<p>Removing a Filter </p>

<ul>
<li>user clicks the small x on the tag they wish to remove</li>
<li>the tag is removed added back to the top list of filters and removed from the array</li>
</ul>

<p><a href="https://i.stack.imgur.com/T0FYa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T0FYa.png" alt="Filters Preview"></a></p>

<pre><code>&lt;div class="blog-feed-filters"&gt;
                &lt;h5&gt;FILTER&lt;/h5&gt;

                &lt;div class="checkbox"&gt;
                    &lt;input class="checkbox-active" id="check1" type="checkbox" name="filter" value="1"&gt;
                    &lt;label for="check1"&gt;Turas Application Updates&lt;/label&gt;
                    &lt;br&gt;
                    &lt;input class="checkbox-active" id="check2" type="checkbox" name="filter" value="2"&gt;
                    &lt;label for="check2"&gt;General News&lt;/label&gt;
                    &lt;br&gt;
                    &lt;input class="checkbox-active" id="check3" type="checkbox" name="filter" value="3"&gt;
                    &lt;label for="check3"&gt;Organisation Updates&lt;/label&gt;
                    &lt;br&gt;
                    &lt;input class="checkbox-active" id="check4" type="checkbox" name="filter" value="4"&gt;
                    &lt;label for="check4"&gt;UI Updates&lt;/label&gt;
                &lt;/div&gt;
                &lt;hr /&gt;
                &lt;div id="content-tag-container"&gt;
                    &lt;div class="content-tag"&gt;Update &lt;a href=""&gt;✕&lt;/a&gt;&lt;/div&gt;
                    &lt;div class="content-tag"&gt;Mobile Applications &lt;a href=""&gt;✕&lt;/a&gt;&lt;/div&gt;
                    &lt;div class="content-tag"&gt;New website update &lt;a href=""&gt;✕&lt;/a&gt;&lt;/div&gt;
                    &lt;div class="content-tag"&gt;Update &lt;a href=""&gt;✕&lt;/a&gt;&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt; 
</code></pre>

<p>JavaScript/ Jquery Please excuse the mess. I'm a noob:D </p>

<pre><code>$('.checkbox-active').click(function () {

//check to see if the checkbox has been "checked"
if (document.getElementById('check1').checked) {

    var filtersSelected = [];

    //get the item that has been checked and add it to an array
    $.each($("input[name='filter']:checked"), function () {
        filtersSelected.push($(this).val() + $("label[for='checkbox-active']").innerText);
    });
    //find the last item in the array
    if (!Array.prototype.last) {
        Array.prototype.last = function () {
            return this[this.length - 1];
        };
    };
    //create a new filter tag and add it to the content-tag-container div 
    for (var c in filtersSelected.last()) {
        var newElement = document.createElement('div');
        newElement.className = "content-tag";
        newElement.innerHTML = "&lt;a href=''&gt;" + "✕" + "&lt;/a&gt;";
        document.getElementById("content-tag-container").appendChild(newElement);
    };

}

});
</code></pre>

<p>Any help is appreciated. Cheers </p>