Как выводить блок после удаления предыдущего?

Question

[Ислам Рузиев]

Есть страница на которой расположены form с тестовым полем и чекбоксами и кнопкой, блок с выводом значений чекбоксов. Псоле выбора чекбокса его значение отправляется в блок (как сообщение пользователя) и весь родительский блок применяет функцию hide. Помощь нужна в объяснении того, как сделать вывод этих блоков с чексбоксами поочередно. загрузка страницы(на странице только 1 строка с чекбоксами) -> выбор чекбокса -> вывод значения в блок messages -> скрытие строки -> вывод второй строки(?) -> ответ -> вывод значения -> скрытие строки -> вывод третей строки(?) и т.д пока не закончатся блоки с чекбоксами.

HTML:

<div class="messages">
    <div class="text-left bot-message">Привет</div>
</div>

<form id="form" method="post">
    <div class="input">
        <input type="text" id="message" class="form-control">
        <input type="submit" class="form-control">
    </div>
    <div class="checkboxes">
        <div class="checkboxes_block">
            <label>
                <input type="checkbox" class="button" value="Вегетарианская">
                Вегетарианская
            </label>
            <label>
                <input type="checkbox" class="button" value="не вегетарианская">
                не вегетарианская
            </label>
        </div>
        <div class="checkboxes_block dn">
            <label>
                <input type="checkbox" class="button" value="Да">
                Да 
            </label>
            <label>
                <input type="checkbox" class="button" value="Нет">
                Нет
            </label>
        </div>
        <div class="checkboxes_block dn">
            <label>
                <input type="checkbox" class="button" value="lol">
                lol 
            </label>
            <label>
                <input type="checkbox" class="button" value="kek">
                kek
            </label>
        </div>
    </div>
</form>

JS:

jQuery(function($) {
  var $text = $('#message'),
      $box = $('.button'),
      $msgbox = $('.messages');
  
  $box.on('click', function() {
    var values = [];
    
    $box.filter(':checked').each(function() {
      values.push(this.value);
    });
    
    $msgbox.append('<div class="text-right user-message">' + values + '</div>');
    $(this).closest(".checkboxes_block").hide();
  });
});

Answer 1

[Влад]

если надо делать какие-то действия по окончании блоков то

var next =  $(this).closest(".checkboxes_block").next();
if (next.length > 0) {
    next.show()
} else {
    // кончились
}

если просто показывать то

$(this).closest(".checkboxes_block").next().show();

Comments

[Ислам Рузиев]

Изначально всем блокам .checkboxes_block задать hide?

[Влад]

Ислам Рузиев, да, кроме первого. Лучше через CSS

[Ислам Рузиев]

Влад, Спасибо за помощь!

[Влад]

Пожалуйста)