JSFiddle - React, Tailwind, and code Playground
HTML
<div id="block-items">
<div class="item-block">
<input type="button" value="Кнопка 1" class="item-button" data-index="1">
</div>
</div>
CSS
input.item-text {width: 300px;}
JavaScript
var buttonMouseEnterEvent = function(event){
var button = $(event.currentTarget);
var index = button.data('index');
var next_index = index + 1;
var block = button.parent();
if (!this.nextElementSibling){
var item_input = '<input value="" class="item-text" placeholder="Пункт ' + index + '">';
var next_item_block = '<div class="item-block">' +
'<input type="button" value="Кнопка ' + next_index + '" class="item-button" data-index="' + next_index + '">' +
'</div>';
$(item_input).insertAfter(button);
$(next_item_block).insertAfter(block);
$('div.item-block:last input.item-button').unbind().on('mouseover', buttonMouseEnterEvent);
}
};
var blockMouseOutEvent = function(event){
var block = $(event.currentTarget);
var next_block = block.next();
var item_text = $('input.item-text', block);
// если мы остаемся внутри блока
if (!block.has(event.relatedTarget).length){
// если удовлетворяет всем условиям, то удаляем поле и кнопку
if (next_block.length && !next_block[0].nextElementSibling && item_text.length && !item_text.val().length){
next_block.remove();
item_text.remove();
}
}
$('div.item-block').unbind().on('mouseout', blockMouseOutEvent);
};
$('div.item-block:last input.item-button').unbind().on('mouseenter', buttonMouseEnterEvent);
$('div.item-block').unbind().on('mouseout', blockMouseOutEvent);
// создаём экземпляр MutationObserver
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
var nodes = $(mutation.addedNodes);
if ($(nodes).hasClass('item-text')){
$(nodes).val('Добавим рандом: ' + Math.floor(Math.random() * 999));
}
});
});
// конфигурация нашего observer:
var config = {childList: true, subtree: true};
// передаём в качестве аргументов целевой элемент и его конфигурацию
observer.observe(document.getElementById('block-items'), config);