使用复选框过滤器创建/删除div

Question

理想情况下，选中任一组的复选框时，将创建div来代表该组的动物，而当取消选中任一组时，将删除该组的div。我的问题是，每当我取消选中一个组时，它就会将所有div连同容器一起从所有组中删除，并且如果重新检查，则会阻止创建div的方法再次起作用。为什么会这样，我该如何解决？谢谢。var cont = document.getElementById('cont');    function test(x) {    var selected = x.checked;    if (selected == true) {        array.forEach(function(element) {            if (element.sort == x.id) {                var div = document.createElement('div');                div.className = x.id;                var header = document.createElement('h4');                header.innerHTML = element.title;                div.appendChild(header);                cont.appendChild(div);            }           })    }       if (selected == false) {        var zed = cont.getElementsByClassName(x.id);        cont.remove(zed);     }}    var array = [     {title: 'Shark', sort: 'Sea'},    {title: 'Whale', sort: 'Sea'},    {title: 'Tuna', sort: 'Sea'},    {title: 'Cow', sort: 'Farm'},    {title: 'Sheep', sort: 'Farm'},    {title: 'Chicken', sort: 'Farm'},].results-container {        display: flex;        flex-direction: column;        width: 200px;        height: auto;        min-height: 50px;        margin-top: 10px;        background-color:lightskyblue;        padding: 10px;    }            .results-container div {        display: flex;        background-color: white;         height: 40px;        width: 100%;        border: 1px solid black;        margin-bottom: 2px;        justify-content: center;        font-size: 10px;    }<div class='filter-container'>    Sea: <input type="checkbox" id = 'Sea' onClick="test(this)" />    Farm: <input type="checkbox" id="Farm" onClick="test(this)"/></div>    <div id='cont' class='results-container'></div>