JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table table-bordered">
    <tr>
        <th>File Attribute</th>
        <th>Attribute name</th>
        <th>Value</th>
        <th>Evaluation</th>
        <th></th>
    </tr>
    <tr>
        <td>
            <input type="text" class="input-xlarge" placeholder="ex:Skip Limits Test" />
        </td>
        <td>
            <input type="text" class="input-xlarge" placeholder="ex: skip_limits_test" />
        </td>
        <td>
            <input type="text" class="input-xlarge" placeholder="value should be string" />
        </td>
        <td>literal_eval</td>
        <td class="add_button">
            <button class="add_attr">Add</button>
        </td>
    </tr>
</table>

JavaScript

$('.add_attr').on('click', function () { //add attribute button clicked
    var r = confirm("Are you sure you want to add attribute ?");
    if (r == true) {

        var attribute = $(this).closest("tr").children().eq(1).children().val();
        var value = $(this).closest("tr").children().eq(2).children().val();
        var title = $(this).closest("tr").children().eq(0).children().val();
        
        var attr = {
            value: value,
            evaluation: 'literal_eval',
            title: title,     
            attribute: attribute
        };
       
       var insert_html='<td>'+attr.title + '</td><td>' + attr.attribute + '</td><td>' + attr.value + '</td> <td>literal_eval</td> <td class="delete_button">  <button class="delete_attr">delete</button> </td></tr>';
        $(insert_html).insertBefore($(this).closest('tr'));
        $(this).closest("tr").children().eq(1).children().val('');
        $(this).closest("tr").children().eq(2).children().val('');
        $(this).closest("tr").children().eq(0).children().val('');

    } else {
        return false;
    }
});