jQuery .change function does not catch the second change from select

I have a button that appends a select every-time I press it with an increasing id

The function below should be fired when I change one of the selects but it does only when I change the first.

Here is the .onchange function

     var appendedCheckboxes =[];
        $("select[id^='catalogName']").change(function(event){
            debugger;
            var cataid = $("select[id*=catalogName").val()

            var cata = out.find(element => {
                return element._id == parseInt(cataid)
            })
            var catalogId = event.target.id.slice(-1);

            if(jQuery.inArray("#insertCheboxesForCatalogsHere"+catalogId, appendedCheckboxes) !== -1){
                $("#insertCheboxesForCatalogsHere" + catalogId + " div").last().remove();
                appendedCheckboxes.splice(jQuery.inArray("#insertCheboxesForCatalogsHere"+catalogId, 1));
            }
            var count = 1

            cata.categories.forEach(element => {
                $('#insertCheboxesForCatalogsHere' + catalogId).append('<div class="input-group mb-1"><div style="margin-left: 10px" class="custom-control custom-checkbox my-1 mr-sm-2" id="task' + count + '"><input type="checkbox" class="custom-control-input" id="' + cata._id + "," + element._id + '"><label class="custom-control-label" for="' + cata._id + "," + element._id + '">'+element.name +'</label></div></div>')            
                count++;
            })
            appendedCheckboxes.push("#insertCheboxesForCatalogsHere" + catalogId);
        })

The selects I append

 $('#insertCatalogHere').append(
'<div id="insertCheboxesForCatalogsHere' + catalogcounteradd +'"class="input-group mb-1">
<div class="input-group-prepend">
<span class="input-group-text" id="">Catalog ' + catalogcounteradd + '</span></div>
<select class="custom-select" id="catalogName' + catalogcounteradd + '" name="catalogName' + catalogcounteradd + '" required>
<option value="" selected>Catalogs...</option>
{{#each catalog}}
<option value="{{this._id}}">{{ this.name }}
</option>
{{/each}}
</select></div>');