Скрыть и показать div и кнопки на основе шаблона идентификатора

Question

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

Я посмотрел на вопрос: jQuery - Функция для отображения следующего элемента на странице и скрытия текущего элемента при нажатии

Но мне не удалось заставить его работать с тем, что у меня есть. : (

Ниже приведен пример сгенерированного html. Чего я хочу добиться:

1. Начните с отображения только div = "question_2" и button id = "submit_2" . => DONE
2. Как только я нажму button id = "submit_2" Я хочу все div и кнопка , чей идентификатор оканчивается следующим номером (ie 3 здесь) для отображения. В приведенном ниже примере я хочу "question_3" и "submit_3" для отображения (и в следующий раз: "description_4" , "question_4" и "submit_4" ).
3. Я хочу hide button id = "submit_2" , чтобы на каждом шаге была только одна кнопка отправки в самом конце веб-страницы.

4. В идеале я хотел бы скрыть формы которые уже были отправлены. Но я все еще хочу, чтобы они отображались на той же странице.

   Это фиктивный вводный текст.

   <div id="question_2" class="card" style="display: block;">
       <h5 class="card-header">Question 1</h5>
       <div class="card-body">
       <h6 class="card-title">The first question is:</h6>
       <p class="card-text">
           <ul id="id_Question 1">
           <li><label for="id_Question 1_0"><input type="checkbox" name="Question 1" value="A" id="id_Question 1_0">Answer 1</label></li>
           <li><label for="id_Question 1_1"><input type="checkbox" name="Question 1" value="B" id="id_Question 1_1">Answer 2</label></li>
           <li><label for="id_Question 1_2"><input type="checkbox" name="Question 1" value="C" id="id_Question 1_2">Answer 3</label></li>
           <li><label for="id_Question 1_3"><input type="checkbox" name="Question 1" value="D" id="id_Question 1_3">Answer 4</label></li>
           </ul>
       </p>
       </div>
   </div>
   <button id="submit_2" class="btn btn-primary" style="display: block;"/>Submit</button>
   
   <div id="question_3" class="card" style="display: block;">
       <h5 class="card-header">Question 2</h5>
       <div class="card-body">
       <h6 class="card-title">The second question is:</h6>
       <p class="card-text">
           <ul id="id_Question 2">
           <li><label for="id_Question 2_0"><input type="checkbox" name="Question 2" value="A" id="id_Question 2_0">Answer 1</label></li>
           <li><label for="id_Question 2_1"><input type="checkbox" name="Question 2" value="B" id="id_Question 2_1">Answer 2</label></li>
           <li><label for="id_Question 2_2"><input type="checkbox" name="Question 2" value="C" id="id_Question 2_2">Answer 3</label></li>
           <li><label for="id_Question 2_3"><input type="checkbox" name="Question 2" value="D" id="id_Question 2_3">Answer 4</label></li>
           </ul>
       </p>
       </div>
   </div>
   <button id="submit_3" class="btn btn-primary" style="display: block;"/>Submit</button>
   
    <div id="description_4" class="card text-white bg-secondary mb-3" style="display: none;">
        <div class="card-body">
            <h6 class="card-title">This is an intermediary description.</h6>
        </div>
    </div>         
   
    <div id="question_4" class="card" style="display: block;">
       <h5 class="card-header">Question 3</h5>
       <div class="card-body">
       <h6 class="card-title">The third question is:</h6>
       <p class="card-text">
           <ul id="id_Question 3">
           <li><label for="id_Question 3_0"><input type="checkbox" name="Question 3" value="A" id="id_Question 3_0">Answer 1</label></li>
           <li><label for="id_Question 3_1"><input type="checkbox" name="Question 3" value="B" id="id_Question 3_1">Answer 2</label></li>
           <li><label for="id_Question 3_2"><input type="checkbox" name="Question 3" value="C" id="id_Question 3_2">Answer 3</label></li>
           <li><label for="id_Question 3_3"><input type="checkbox" name="Question 3" value="D" id="id_Question 3_3">Answer 4</label></li>
           </ul>
       </p>
       </div>
   </div>
   <button id="submit_4" class="btn btn-primary" style="display: block;"/>Submit</button>
   

My jquery код:

{% block custom_js %}
<script>
    $( "#submit_2" ).click(function() {
        $( "div:hidden" ).first().fadeIn( "slow" );
        }
    )  
</script>
{% endblock %}

Он делает то, что я хочу, только для самых первых шагов. Будучи новичком в jquery, я не знаю, как постепенно исчезать во всем, что заканчивается _3, ...

Может быть, есть идеи, как мне этого добиться?

Спасибо за помощь! : D

ОБНОВЛЕНИЕ 09/02/2020 : Я делаю успехи. Мой код jquery теперь выглядит следующим образом:

<script>
    var count = 2;

    function incrementCount(){
       count++;
    }

    $( "#submit_" + count.toString() ).click(function() {

        // Make current question read only + hide the submit button.
        $("div[id$='_" + count.toString() + "']").prop('readonly', true);
        $("button[id$='_" + (count).toString() + "']").fadeOut( "slow" );

        incrementCount();

        // Display next question and associated submit button.
        $("div[id$='_" + count.toString() + "']").fadeIn( "slow" );
        $("button[id$='_" + count.toString() + "']").fadeIn( "slow" );


        }
    )
</script>

У меня две принципиальные проблемы:

1. функция $ ("#submit_" + count.toString ()) .click (функция () не обновляется при увеличении счетчика. В результате она работает только для первого щелчка.
2. только чтение не работает.

У вас есть идея? for (1)? Может ли это быть из-за того, что jquery не может справиться с динамическими c именами функций?