Dynamically add rows to an invoice-form with JQuery

I have a formfield with a static row for an invoice position. With + and - buttons I can add or remove additional rows for invoice positions dynamically. This works fine, but within each row I have a have a selectbox that switches the calculation method for the row (from km- to hour- or misc-based). This last feature only works for the first static row, not for the added rows?

HTML

    <form action="" method="post">
        <div class="mb-3">
            <div id="position_0" class="row align-items-start">
                <div class="col-4">
                    <label for="description" class="form-label">Beschreibung</label>
                    <textarea class="form-control" id="description_0" name="description_0" rows="1"></textarea>
                </div>
                <div class="col-2">
                    <label for="date" class="form-label">Tag der Leistung</label>
                    <input type="text" class="form-control" id="date_0" name="date_0">
                </div>
                <div class="col-1">
                    <label for="amount" class="form-label">Menge</label>
                    <input type="text" class="form-control" id="amount_0" name="amount_0">
                </div>
                <div class="col-2">
                    <label for="type" class="form-label">Abrechnungsform</label>
                    <select class="form-select" id="type_0" name="type_0">
                        <option value="km" selected>Kilometer</option>
                        <option value="hours">Stunden</option>
                        <option value="misc">Sonstiges</option>
                    </select>
                </div>
                <div class="col-1">
                    <label for="price" class="form-label">Einzelpreis</label>
                    <input type="text" class="form-control" id="price_0" name="price_0" value="">
                </div>
                <div class="col-2">
                    <label for="sum" class="form-label">Summe</label>
                    <input type="text" class="form-control" id="sum_0" name="sum_0">
                </div>
            </div>
        </div>
        <div id="multiple"></div>
        <button type="submit" class="btn btn-primary float-start">Speichern</button>
    </form>
    <button class="btn btn-primary float-end" onclick="addItems()"><i class="bi bi-plus"></i></button>
    <button class="btn btn-primary float-end" onclick="removeItems()"><i class="bi bi-dash"></i></button>

Javascript/JQuery

<script>
    var formatter = new Intl.NumberFormat('de-DE', {
        style: 'currency',
        currency: 'EUR',
    });

    var km = 0.97;
    var hours = 12;
    var misc = 0;

    // THIS DOES NOT WORK START
    $("#multiple").each(function () {
        var n = $(this).find("div.mb-3").length;
        $('#type_' + n).on('change', function () {
            if (this.value === 'km') {
                $('#price_' + n).val(formatter.format(km));
            } else if (this.value === 'hours') {
                $('#price_' + n).val(formatter.format(hours));
            } else if (this.value === 'misc') {
                $('#price_' + n).val(formatter.format(misc));
            }
        });
    });
    // THIS DOES NOT WORK END

    function addItems() {
        $("#multiple").each(function () {
            var i = $(this).find("div.col").length;
            var n = (i / 6) + 1;
            $(this).append(`<div class="mb-3">
            <div id="position_` + n + `" class="row align-items-start">
                <div class="col col-4">
                    <textarea class="form-control" id="description_` + n + `" name="description_` + n + `" rows="1"></textarea>
                </div>
                <div class="col col-2">
                    <input type="text" class="form-control" id="date_` + n + `" name="date_` + n + `">
                </div>
                <div class="col col-1">
                    <input type="text" class="form-control" id="amount_` + n + `" name="amount_` + n + `">
                </div>
                <div class="col col-2">
                    <select class="form-select" id="type_` + n + `" name="type_` + n + `">
                        <option value="km" selected>Kilometer</option>
                        <option value="hours">Stunden</option>
                        <option value="misc">Sonstiges</option>
                    </select>
                </div>
                <div class="col col-1">
                    <input type="text" class="form-control" id="price_` + n + `" name="price_` + n + `" value="">
                </div>
                <div class="col col-2">
                    <input type="text" class="form-control" id="sum_` + n + `" name="sum_` + n + `">
                </div>
            </div>
        </div>`);
        });
    }

    function removeItems() {
        $("#multiple").each(function () {
            var n = $(this).find("div.mb-3").length;
            if (n != 0) {
                $("#position_" + n).parents("div.mb-3").remove();
            }
        });
    }
</script>

Via Active questions tagged javascript - Stack Overflow https://ift.tt/BpEImlW