JSFiddle - React, Tailwind, and code Playground

by cutsomeat

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div id="wrap">
    <p>Our Family</p>
    <div class="input-group">
        <input type="text" id="txtName" class="form-control" placeholder="Name" />
        <input type="text" id="txtAge" class="form-control" placeholder="Age" />
        <button id="btnAddPerson" class="form-control">Add</button>
    </div>
    
    <ul id="myList"></ul>
</div>

CSS

#wrap {
    width: 100%;    
}
#myList {
    padding: 0; margin: 0;
    list-style-type: none;
}
#myList li {
    display: inline-block;
    border: 1px solid black;
    border-radius: 3px;
    margin: 2px;
    padding: 2px 6px 2px 6px;
}
#myList li:hover {
    background-color: Aqua;
    cursor: pointer;
}

JavaScript

$(document).ready(function() {
    var myList = $("#myList");
    var people = [
        { name: "Emmett", age: 11 },
        { name: "Liam", age: 34 },
        { name: "Juli", age: 41 },
        { name: "Skylar", age: 15 },
        { name: "Danny", age: 21 }
    ];
    var counter = 0;
    
    $.each(people, function(key, person) {
        var personItem = $("<li>").attr("id", counter).append(person.name + " [" + person.age + "]");
        myList.append(personItem);
    });
           
    
    
});