JSFiddle - React, Tailwind, and code Playground

by jcreamer898

HTML

<!-- 
    1. Add a label for each checkbox with the following pattern "Click 
       to add a box to the {direction} list"
    2. Provide a header for each container div that shows which side
       of the screen it is currently on
    3. Each child div should have text that shows its order in the list
 -->
<div>
    <div id="1_1"></div>
    <div id="1_2"></div>
    <div id="1_3"></div>
    <div id="1_4"></div>
    <div id="1_check"><button>Add</button></div>
</div>
    
<div>
    <div id="2_1"></div>
    <div id="2_2"></div>
    <div id="2_3"></div>
    <div id="2_4"></div>
    <div id="2_check"><button>Add</button></div>
</div>

CSS

/*
    1. Every div element that has an `id` property should have a 
       class that provides it with a 1px border
    2. The two container divs (without an id) should be displayed side-by-side
    3. The first container div should be on the right
    4. The second container div should be on the left
    5. Give each container div a different background color of your choice
*/

JavaScript

$( document ).ready(function() {
    // You can use plain old JavaScript or the jQuery library to fulfill the
    // the following requirements.
    //    1. When a user clicks on one of the buttons in each container, 
    //       append a new child that has all the appropriate styles
    //    2. When a user checks, or unchecks, the checkbox in each 
    //       container, change the background color to a different one 
    //       of your choosing
});