JSFiddle - React, Tailwind, and code Playground

HTML

type a hobby: <input id='hobby_name' type='text'/><br /><br />
<table border='1' width='400px'>
    <tr><td>number</td><td colspan='2'>hobby</td></tr>
    <tr class='new_hobby' id='add_row'><td class='td_new' colspan='3'><div class='add_hobby' align='center'>Add</div></td></tr>
</table>

CSS

.add_hobby {
    
    background-color:navy;
    color:white;
    font-weight:bold;
    padding:5px;
    cursor:pointer;
    border-radius:10px;
}
.del_but {    
    background-color:orange;
    color:white;
    font-weight:bold;
    padding:5px;
    cursor:pointer;
    border-radius:10px;
}

JavaScript

$('#hobby_name').val('some hobby 1');

    var counter = 0;
    $(document).on('click','.add_hobby', function() {
        counter++;
		var nuovo_hobby="<tr class='hobby' hobby_id='hobby_title'><td id='hobby_index' width='100px'>" + 
                         counter + "</td><td>" + $('#hobby_name').val() + 
                        "</td><td><div class='del_but' align='center'>Del</div></td></tr>";
			$("#add_row").before(nuovo_hobby);
            $('#hobby_name').val('some hobby ' + (counter+1));
	   });

    $(document).on('click','.del_but', function() {
            $(this).parent('td').parent('tr').remove();
	   });