JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<div id="container">
<div id="test" style="display:none">
    <button>A</button>
    <input type="text">
    <button>B</button>
    <input type="text">
</div>
</div>

JavaScript

test = $('#test');

test.children('input:eq(0)').attr('value', 1);
test.children('input:eq(1)').attr('value',2);

test.children('button:eq(0)').click(function(){
    alert(test.children('input:eq(0)').attr('value'));
});

test.children('button:eq(1)').click(function(){
    alert(test.children('input:eq(1)').attr('value'));
});


for(x=0;x<5;x++){
    new_test = $('<div></div>');
    new_test.append(test.html());
    
    text_1 = new_test.children('input:eq(0)');
    text_2 = new_test.children('input:eq(1)');
    
    text_1.attr('value', x);
    text_2.attr('value', x+1);

    
    new_test.children('button:eq(0)').click(function(){
        alert(new_test.children('input:eq(0)').attr('value'));
    });

    new_test.children('button:eq(1)').click(function(){
        alert(new_test.children('input:eq(1)').attr('value'));
    });
    
    $('#container').append(new_test);
}