Немного кода для добавления функционала открытия дополнительных полей в форме по клику на кнопку, как изображено на рисунке. Т. е. по клику на кнопку "Добавить участника" открывается пара полей "ФИО-Должность". Количество пар обозначено заранее в верстке.
Верстка:
<div class="fio_pos"> <label class="group-header">Участники</label> <div class="flexbox-cols row"></div> <div class="flexbox-cols row"></div> <div class="flexbox-cols row"></div> <input type="button" class="btn btn-link btn-ownerc-link js-add-participants" value="+ Добавить участника"> </div>
Стили CSS:
.flexbox-cols {
display: none;
}
.fio_pos .flexbox-cols:nth-of-type(1) {
display: block;
}
И непосредственно сам скрипт, отвечающий за вставку дополнительных полей. Используется библиотека jQuery:
$('.js-add-participants').on('click', function() {
var $container = $(this).parent();
var $flexboxCols = $(this).siblings(".fio_pos .flexbox-cols:last");
var $siblings_cnt = $container.children(".flexbox-cols").length;
$flexboxCols.removeClass("flexbox-cols");
$flexboxCols.addClass('show');
$flexboxCols.detach();
$flexboxCols.insertBefore(this);
if($siblings_cnt == 2) {
$(this).remove();
}
});