I am trying to add a check box when button is pressed and also delete the same checkbox when the delete is pressed. Unfortunatly the delete function cannot run as it seems that the newly created div doesn't exist yet. How can I get around this?

<script>
    const list = document.getElementById("list");
    const cli_form = document.getElementById("client-form");
    let idz = 0;

    function add_client(input) {

        const div = document.createElement("div");
        div.setAttribute("id", idz.toString())


        const newCheckbox = document.createElement("input");
        newCheckbox.setAttribute("type", 'checkbox');
        newCheckbox.setAttribute("id", 'checkbox');

        const newLabel = document.createElement("label");
        newLabel.setAttribute("for", 'checkbox');
        newLabel.innerHTML = input.value;

        const br = document.createElement("br");

        const del = document.createElement("input");
        del.setAttribute("type", 'button');
        del.setAttribute("value", idz.toString());
        del.onclick = delete_item(document.getElementById(idz.toString()));

        div.appendChild(newCheckbox);
        div.appendChild(newLabel);
        div.appendChild(del);
        div.appendChild(br);

        list.appendChild(div);
        idz++;
    }

    function delete_item(item1) {
        item1.remove();
    }
</script>