add same event Listener on dynamically created element?

Question

ok so my question is not clear let me explain what i want to do

i have set of inputs that i have added event Listener on and during run time i am deleting that input tags and generating new ones and i want to set same event Listener on that so how do i do that

thanks in advance

here is my code

document.querySelectorAll("input[type=radio]").forEach(radio => {
   
   
    radio.onchange = () => { // Event No.1
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {

                var li = JSON.parse(this.response);

                // the response i am getting
                //["mainCategory",{"id":11,"MainCategory":"Pendalset","Top_ID":3,"created_at":null,"updated_at":null,"name":"Pendalset"},{"id":12,"MainCategory":"Diamond","Top_ID":3,"created_at":null,"updated_at":null,"name":"Diamond"},{"id":13,"MainCategory":"Couple Collection","Top_ID":3,"created_at":null,"updated_at":null,"name":"Couple Collection"},{"id":14,"MainCategory":"Antique","Top_ID":3,"created_at":null,"updated_at":null,"name":"Antique"},{"id":15,"MainCategory":"Wedding Collection","Top_ID":3,"created_at":null,"updated_at":null,"name":"Wedding Collection"},{"id":16,"MainCategory":"Engagement Collection","Top_ID":3,"created_at":null,"updated_at":null,"name":"Engagement Collection"},{"id":17,"MainCategory":"Necklace set","Top_ID":3,"created_at":null,"updated_at":null,"name":"Necklace set"}]

                var ul = document.querySelector("#" + li[0]);

                //removing inputs

                switch (li[0]) {
                    case "mainCategory":
                        var main = document.querySelector("#mainCategory");
                        var sub = document.querySelector("#subCategory");
                        while (main.firstChild) {
                            main.firstChild.remove()
                        }
                        while (sub.firstChild) {
                            sub.firstChild.remove()
                        }

                        break;
                    case "subCategory":
                        var sub = document.querySelector("#subCategory");
                        while (sub.firstChild) {
                            sub.firstChild.remove()
                        }
                        break;
                }
                var inpName = li.shift();
                //creating new list tag and input
                li.forEach(el => {
                    var list = document.createElement("li");
                    var input = document.createElement("input");
                    var b = document.createElement("b")
                    input.name = inpName;
                    input.type = "radio";
                    input.value = el.id
                    b.textContent = el.name;
                    list.append(input);
                    list.append(b);
                    ul.append(list)
                        // adding diffrenet event listeners 

                        // I WANT TO ADD EVENT NO.1 HERE on Dyanamically genrated Inputs
                    input.addEventListener("change", () => {
                        input.parentElement.parentElement.parentElement.firstElementChild.firstElementChild.textContent = input.nextElementSibling.textContent;
                        details.forEach((detail) => {
                            if (detail !== input) {
                                detail.removeAttribute("open");
                            }
                        });
                    })

                });
            }
        };
        xhr.open("GET", `category-update-${radio.name}-${radio.value}`, true);
        xhr.send()
    }
});