JSFiddle - React, Tailwind, and code Playground

by I Sang Hyeon

HTML

<div>
    <table border="1px">
        <thead>
            <tr>
                <th>no</th>
                <th>name</th>
            </tr>
        </thead>
        <tbody id="jisa-tbody">
            <tr id="tr_1">
                <td>1</td>
                <td><input type="text" value="this tr ID is tr_1"/></td>
            </tr>
        </tbody>
    </table>
</div>
<div>
    <input type="button" id="add" class="btn" value="add"/>
    <input type="button" id="remove" class="btn" value="remove"/>
</div>

JavaScript

$(document).ready(function(){
    var no = 1;
    $('.btn').click(function(){
        
        if($(this).attr('id') == 'add'){
            no++;
            var innerhtml = '';
            innerhtml = '<tr id="tr_'+no+'">';
            innerhtml +='    <td>'+no+'</td>';
            innerhtml +='    <td><input type="text" value="this tr ID is tr_'+no+'"/></td>';
            innerhtml +='</tr>';
            alert('in: '+innerhtml);
            $('#jisa-tbody').append(innerhtml);
        }else{
            $('#tr_'+no).remove();
        }
    });
});