JSFiddle - React, Tailwind, and code Playground

HTML

<div id="question1" class="question">
    <p>1. Possible Colors</p>
    <ul>
        <li class="list"><input type="checkbox" name="q1" id="Red" value="116"/> Red</li>
        <li class="list"><input type="checkbox" name="q1" id="Blue" value="129"/> Blue</li>
        <li class="list"><input type="checkbox" name="q1" id="Green" value="137"/> Green</li>        
        <li class="list"><input type="checkbox" name="q1" id="Yellow" value="138"/> Yellow</li>
    </ul>
</div>

<div id="question2" class="question">
    <p>2. Select List of Colors</p>
    <select id="comm2"><option>[Select One]</option></select>
</div>
<div id="question3" class="question">
    <p>3. Select List of Colors</p>
    <select id="comm3"><option>[Select One]</option></select>
</div>

CSS

ul
{
    list-style-type: none;
}

JavaScript

$(function() {
    $( 'input[name=q1]' ).on( 'change', function() {
        var sel = $('[id^="comm"]'), opt = $( '<option/>' );
        
        if (sel.find('option').text().indexOf(this.id) > 0) {
        
            $('option[value=' + this.value + ']').remove();
            alert(this.value)
            
        } else {
        
        
            sel.append( $("<option />").val(this.value).text( this.id ) );
        }
    });
});