JS / jQuery event not firing after use

Question

the thing is that when I load the page and click on the blue buttons the event is registered, no problems there, but as soon I change the items on the corresponding class of the blue buttons it stops working, don't eve register the event, is like the code was not there. Thanks in advance for your time.

[Event registered on page load][1] [1]: https://i.stack.imgur.com/2EmOZ.png

[Nothing happens once the brown or green buttons are used][2] [2]: https://i.stack.imgur.com/RPEzF.png

const listaIng = Object.keys(ingredientes);

const precioIng = Object.values(ingredientes);



//Brown green buttons builder
listaIng.map( (item, index) => {
    let iBox = document.createElement('div');
    iBox.id = index;
    iBox.innerHTML = `<p>${listaIng[index].replace("_", " ").toLocaleUpperCase()}</p>
    <p class="indPrice">$${precioIng[index]}</p>`;
    document.querySelector(".ingredientsContainer").appendChild(iBox);
    iBox.className = "ingredientItem";
    iBox.id > 9 ? iBox.style.backgroundColor = "green" : iBox.style.backgroundColor = "chocolate"
    //Operador ternario
})


let clientSel = [0, 1];
constSelCliente(clientSel);
priceBuilder(clientSel);


//Blue buttons builder
function constSelCliente(loadedArray) {
    for (let item of loadedArray) {
        let iBox2 = document.createElement("div");
        iBox2.innerHTML = `<p>${listaIng[item].replace("_", " ").toLocaleUpperCase()}</p>`;
        document.querySelector(".area-listClient").appendChild(iBox2);
        iBox2.className = "ingredientItemSel";
        iBox2.id = `cs${item}`;
    }
}


//Price Builder
function priceBuilder(cSel) {
    let totalCost = 0;
    document.querySelector(".totalPrice").innerHTML = "";
    for (let idPrice of cSel) {
      totalCost += precioIng[idPrice];
    }
    document.querySelector(".totalPrice").innerHTML = `$${totalCost.toFixed(2)}`;
}


// Event listener for brown and green buttons

$(".ingredientItem").click( function () {
    clientSel.push(this.id);
    priceBuilder(clientSel);
    $(".ingredientItemSel").remove();
    constSelCliente(clientSel);
})


// Event listener for blue buttons

$(".ingredientItemSel").on("click", function (e) {
    console.log(this);
})