Изменить параметры выбора на основе выбора из нескольких итераций

У меня был выбор, который, в зависимости от выбранного параметра, влиял на параметры из двух других вариантов выбора (которые также влияли друг на друга между собой). До сих пор это работало нормально. Вот код, который у меня был:

HTML

<div id = "sel" class = "sel-val">
    <div class = "row">
        <div class = "col">
            <select class = "tipo" name = "tipo">
                <option selected>Select an option</option>
                <option value = "1">1</option>
                <option value = "2">2</option>
                <option value = "3">3</option>
                <option value = "4">4</option>
            </select>
        </div>
        <div class = "col">
            <select class = "num-a" name = "num-a">
                <option value = "0" selected>0</option>
            </select>
        </div>
        <div class = "col">
            <select class = "custom-select num-n" name = "num-n">
                <option value = "0" selected>0</option>
            </select>
        </div>
    </div>
</div>

JS

$('.tipo').on("change", function() {
    var val = $(this).val();
    $(".num-a").html(options1[val]);
    $(".num-n").html(options2[val]);
    if (val == 1) {
        $('.num-a').on("change", function() {
            var vara = $(this).val();
            $(".num-n").html(optionsIn[vara]);
        });
        $('.num-n').on("change", function() {
            var varn = $(this).val();
            $(".num-a").html(optionsIn[varn]);
        });
    }
    if (val == 2) {
        // same with different arrays
    }
    if (val == 3) {
        // same with different arrays
    }
    if (val == 4) {
        // same with different arrays
    }
});
var options1 = [
    array with options 1
];
var options2 = [
    array with options 2
];
etc ...

Мне пришлось изменить его, чтобы вместо одного раза у меня был один и тот же код, повторяемый X раз (в зависимости от ввода, установленного пользователем), каждый из которых будет иметь те же три выбора внутри, которые будут иметь те же варианты. Итак, теперь это выглядит примерно так:

<div id = "sel-1" class = "sel-val">
    <div class = "row">
        <div class = "col">
            <select class = "tipo" name = "tipo-1">
                options...
            </select>
        </div>
        <div class = "col">
            <select class = "num-a" name = "num-a-1">
                <option value = "0" selected>0</option>
            </select>
        </div>
        <div class = "col">
            <select class = "custom-select num-n" name = "num-n-1">
                <option value = "0" selected>0</option>
            </select>
        </div>
    </div>
</div>
...
<div id = "sel-X" class = "sel-val">
    <div class = "row">
        <div class = "col">
            <select class = "tipo" name = "tipo-X">
                options...
            </select>
        </div>
        <div class = "col">
            <select class = "num-a" name = "num-a-X">
                <option value = "0" selected>0</option>
            </select>
        </div>
        <div class = "col">
            <select class = "custom-select num-n" name = "num-n-X">
                <option value = "0" selected>0</option>
            </select>
        </div>
    </div>
</div>

Проблема в том, что с кодом, который у меня есть, всякий раз, когда я устанавливаю любую из опций .tipo, это влияет на все выборки X .num-a и .num-n (также изменение любого из .num-a влияет на все .num-n и наоборот), когда это должно влиять только на параметры соответствующего n-го выбора.

Мне пришлось изменить первое on("change") на $(document).on('change') для распознавания выбора (нашел его в ответе другого пользователя), поэтому первая строка сценария теперь:

$(document).on('change','.tipo-habitacion-sel', function() {

Я не очень хорошо разбираюсь в js, так что это может быть что-то очевидное, но я пробовал несколько вещей и не могу заставить их работать.