JSFiddle - React, Tailwind, and code Playground

HTML

<table id="teams" border="0">
    <tr>
        <th>City</th>
        <th>Team</th>
        <th><a href="javascript:void(0)" class="restore">Restore All</a></th>
    </tr>
</table>

JavaScript

var Teams = { "footballTeams" : [ 
        { "city":"Carolina" , "team":"Panthers" },  
        { "city":"Philadelphia" , "team":"Eagles" },  
        { "city":"Baltimore" , "team":"Ravens" },  
        { "city":"Chicago" , "team":"Bears" }, 
        { "city":"Cincinnati" , "team":"Bengals" },
        { "city":"Green Bay" , "team":"Packers" },
        { "city":"Seattle" , "team":"Seahawks" },
        { "city":"Indianapolis" , "team":"Colts" },
        { "city":"Detroit" , "team":"Lions" },
        { "city":"Oakland" , "team":"Raiders" }
        ] } ; 
        
        //append the rows to the table by calling the array    
        $(Teams.footballTeams).each(function(index, element){  
             $('#teams').append('<tr><td> '+element['city']+' </td> <td> '+element['team']+' </td><td><a href="javascript:void(0)" class="delete">Delete</a></td></tr>');       
        })
        
        //Make each odd row a different background color
        $('#teams tr:odd').css({ "background-color" : "#fff" }); 
        
        
        var deleted; 
        //Allow people to delete rows
        $('a.delete').click(function() {
            deleted = $(this).parent().parent().detach();
        });
        
        //Restore all
        $('a.restore').click(function() {
            $('#teams').append(deleted);
        });