JSFiddle - React, Tailwind, and code Playground

HTML

click any option to see it appeneded TWICE, not once as it would make sense to do...
<ul>
    <li>
           <label for="test_0" class="">
               <input id="test_0" name="offering_cycle" type="checkbox" value="1">
                Fall
            </label>
    </li>
    <li>
           <label for="test_1" class="">
               <input id="test_1" name="offering_cycle" type="checkbox" value="2">
                Spring
            </label>
    </li>
    <li>
           <label for="test_2" class="">
               <input id="test_2" name="offering_cycle" type="checkbox" value="3">
                Summer
            </label>
    </li>
    <li>
           <label for="test_3" class="">
               <input id="test_3" name="offering_cycle" type="checkbox" value="4">
                Other
            </label>
    </li>
</ul>
        <div id="target"></div>

CSS

ul {
    list-style-type:none;
}
label {
    position:relative;
    display:inline-block;
    padding-left:27px;
    height:25px;
}
label:before {
    display:block;
    position:absolute;
    top:-2px;
    margin-left:-28px;
    width:18px;
    height:18px;
    background-color:#fff;
    border-radius:5px;
    border:1px solid #ccc;
    text-align: center;
    color:#fff;
    font-size:18px;
    content:'a';
}
input {
    width:1px;
    height:1px;
    border:0;
    opacity:0;
    float:right;
}

JavaScript

$('label[for*=test_]').on('click',function(){
    $('div#target').append($(this).clone());    
});