JSFiddle - React, Tailwind, and code Playground

by swoogie

HTML

<button id="plus">+</button>

<div id="container"></div>

JavaScript

$(document).ready(function () {
    var counter = 0;
    $("#plus").on('click', function () {
        var newRow = "<div>"
            + "<input type='text' class='main-input' data-id='" + counter + "' />"
            + "<input type='text' class='mirror' data-id='" + counter + "' />"
            +"<button class='minus'>-</button></div>"
        counter += 1;
        $("#container").append(newRow);
    });
    $("#container").on('click', '.minus', function(){
        $(this).parent().remove();
    });
    
    $("#container").on('keyup', '.main-input', function(){
        var $self = $(this),
            text = $self.val(),
            id = $self.data('id');
        
        $('.mirror[data-id="'+id+'"]').val(text);
    });
});