JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<div class="dop_info_form"></div>
<div class="dop_info_btn" data-dop_info_add="add">Добавить поле</div>

CSS

.dop_info_form {
    display: block;
}
.dop_info_block {
    background: #EFEFEF;
    border: 1px solid #ddd;
    margin-bottom: 5px;
    padding: 5px 10px;
}
.dop_info_block input {
    border: 1px solid #B3B3B3;
    padding: 5px 10px;
    width: 330px;
}
.dop_info_block select {
    border: 1px solid #B3B3B3;
    padding: 4px 10px;
    width: 150px;
}
.dop_info_dell {
    background: #FFC8C8;
    border: 1px solid #E42929;
    color: #E42929;
    cursor: pointer;
    display: inline-block;
    font-size: 10px;
    padding: 7px 9px;
    position: relative;
    vertical-align: top;
}
.dop_info_btn {
    background: #F3F3F3;
    border: 1px solid #ccc;
    cursor: pointer;
    display: inline-block;
    padding: 2px 5px;
    position: relative;
}

JavaScript

var block_sum = 1;

$(document).on('click', '[data-dop_info_add]', function () {

    var block = '<div class="dop_info_block dop_info_block_' + block_sum + '" style="display: none;">\
    <input type="text" name="dop_info_name[name_' + block_sum + ']">\
    <select name="dop_info_type[type_' + block_sum + ']">\
        <option value="1">Одна строка</option>\
        <option value="2">Несколько строк</option>\
    </select>\
    <strong class="dop_info_dell" data-dop_info_dell="' + block_sum + '">X</strong>';

    $(".dop_info_form").append(block);
    setTimeout(function () {
        $(".dop_info_block").slideDown(200);
    }, 200);

    block_sum = block_sum + 1;

});

$(document).on('click', '[data-dop_info_dell]', function () {

    var id = $(this).data('dop_info_dell');

    $(".dop_info_block_" + id).slideUp(200);
    setTimeout(function () {
        $(".dop_info_block_" + id).remove();
    }, 300);

});