使用复选框过滤器创建/删除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>