Управление DOM из коллекции div с использованием Jquery

Question

Я работаю над внешней частью приложения, в которой у меня есть некоторые входные данные формы (обернутые в div). У каждого элемента есть кнопка «Добавить бенефициара». Обычно, когда пользователь нажимает на кнопку, должен отображаться элемент div, расположенный под ним (который по умолчанию скрыт), и последовательность продолжается (каждая кнопка элемента div нажимала элемент div, отображаемый ниже).

На кнопкедля каждого div я написал некоторую логику, при которой при событии щелчка вызывается функция addBeneficiary. Я анализирую идентификатор нажатой кнопки. Далее в функции я манипулирую DOM, обращаясь к родительскому div и отображая его, но логика не работает.

~ Пожалуйста, помогите?

Разметка

<!--Person One-->
<div class="container mg-t-30" id="beneficiary1">
    <div class="row col-11 mx-auto">
        <div class="col-12">
                <div class="row">
                    <div class="col-6">
                        <label> Category</label>
                        <input type="email" class="form-control" placeholder="Enter email">
                    </div>
                    <div class="col-6">
                        <label>Family Size</label>
                        <input type="password" class="form-control" placeholder="Password">
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <button class="float-right btn btn-primary" id="btnBen1" onclick="addBeneficiary(this.id)">Add Beneficiary</button>
                    </div>
                </div>
        </div>
    </div>
</div>

<!--Person Two-->
<div class="container mg-t-30" style="display:none;" id="beneficiary1">
    <div class="row col-11 mx-auto">
        <div class="col-12">
                <div class="row">
                    <div class="col-6">
                        <label> Category</label>
                        <input type="email" class="form-control" placeholder="Enter email">
                    </div>
                    <div class="col-6">
                        <label>Family Size</label>
                        <input type="password" class="form-control" placeholder="Password">
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <button class="float-right btn btn-primary" id="btnBen1" onclick="addBeneficiary(this.id)">Add Beneficiary</button>
                    </div>
                </div>
        </div>
    </div>
</div>

Логика

function addBeneficiary(beneficiary){
    let check = $('#' + beneficiary).parents('div').last().prop('id');
    //console.log(check);

    $("check").css("display", "block");
}

Answer 1

Это не работает, потому что оба родителя div ID является "Beneficiary1". И вы не можете использовать один и тот же идентификатор с несколькими тегами. Он должен быть уникальным, например, Beneficiary1, Beneficiary2 и так далее ... А также немного изменить ваш сценарий.

function addBeneficiary(beneficiary){
    let check = $('#' + beneficiary).parents('div').next('div');
    //console.log(check);

    check.css("display", "block");
}

jsfiddle https://jsfiddle.net/y2mva6es/