JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset>
    <legend>Locations</legend>
    <div class="content">
    <input type="checkbox" name="Baseball diamond">Baseball diamond</input><br />
    <input type="checkbox" name="Basement">Basement</input><br />
    <input type="checkbox" name="Garage">Garage</input><br />
    <input type="checkbox" name="Home">Home</input><br />
    <input type="checkbox" name="Park">Park</input><br />
    <input type="checkbox" name="Parking lot">Parking lot</input><br />
    <input type="checkbox" name="Playground">Playground</input><br />
    <input type="checkbox" name="Playground - Monkey bars">Playground - Monkey bars</input><br />
    <input type="checkbox" name="Playground - Slide">Playground - Slide</input><br />
    <input type="checkbox" name="Playground - Swing set">Playground - Swing set</input><br />
    <input type="checkbox" name="School">School</input><br />
    <input type="checkbox" name="Soccer field">Soccer field</input><br />
    <input type="checkbox" name="Symphony">Symphony</input><br />
    <input type="checkbox" name="Theater">Theater</input><br />
    <input type="checkbox" name="Work">Work</input>
    </div>
</fieldset>

<fieldset>
    <legend>Selected Locations</legend>
    <div class="content">
        <ul id="selected">
        </ul>
    </div>
</fieldset>

CSS

fieldset {
      width: 400px;
}
fieldset div {
    height: 250px;
    overflow-y: auto;
}

ul,li {
    list-style: none;
    padding-left: 5px;
    padding-bottom: 2px;
}

JavaScript

$(".content input").click(function() {
    var thisCheck = $(this);
    if (thisCheck.is (':checked')) {
        var txt = thisCheck.attr("name");
        $(".content #selected").append("<li>" + txt + "</li>");
    }
});