JQuery使用增量类名追加新的HTML输入

我有一个场景,我应该添加漫画和连续剧。 我已经这样做了,只是计数器没有正确递增。

$(document).ready(function () {
    let cartoonsCounter = 1;
    let serialCounter = 1;
    const serialInput = `<input type="text" required class="w-80 text-center block mt-4 s-${serialCounter}" >`;
    const cartoonInput = `<input type="text" required class="mx-auto text-center w-80 c-${cartoonsCounter}" dir="ltr">`;

    // add first cartoon el
    $(".cartoons").append(cartoonInput);

    $("body").on("keyup", ".c-" + cartoonsCounter, function (e) {
        if (e.keyCode == 13) {
            const c_value = $(".c-" + cartoonsCounter).val();
            // if there is a serial
            if (c_value.trim() !== "") {
                $(".serials-container").show();
                $(".serials").append(serialInput);
            }
            // disable cartoon input
            $(".c-" + cartoonsCounter).prop("disabled", true);
        }
    });

    //first serial input
    $("body").on("keyup", ".s-" + serialCounter, function (e) {
        if (e.keyCode == 13) {
            const s_value = $(".s-" + serialCounter).val();
            // if there is a serial
            if (s_value.trim() !== "") {
                serialCounter++;
                console.log(serialCounter);
                $(".serials").append(serialInput);
            }
        }
    });
});

附加的序列号是 s-1 并且没有如它们应该的那样递增。