JSFiddle - React, Tailwind, and code Playground

by Minko Gechev

HTML

<div>
    <button class="add-student">Добави студент</button>
    <div class="student">
        Студент:<input type="text" />
        <div class="disciplines-inputs">
            <input type="text" class="disciplines-input" />
        </div>
        <div class="disciplines-button">
            <button class="add-discipline">Добави дисциплина</button>
        </div>
    </div>
</div>

CSS

.disciplines-inputs {
    width: 400px;
    float: left;
}
.disciplines-inputs input {
    display: block;
}
.disciplines-button {
    width: 180px;
    float: right;
}
.student {
    width: 500px;
}

JavaScript

$(document).on('click', '.add-discipline', function () {
    var container = $(this).parent().prev();
    container.append('<input type="text" />');
});

$(document).on('click', '.add-student', function () {
    var container = $(this).parent();
    container.append(container.children('.student').clone());
});