JSFiddle - React, Tailwind, and code Playground

Lorax's Answer

by chayacooper

HTML

<label for="priority1Issues">First Priority</label>
<select id="priority1Issues" class="priorityIssue" multiple></select>

<label for="priority2Issues">Second Priority</label>
<select id="priority2Issues" class="priorityIssue" multiple></select>

<br />
<div class="complaint">
    <label for="shoulders">Shoulders</label>
    <select id="shoulders" class="complaintOpt complaintItem">
        <option value="Null">Select</option>
        <option value="too_big">Too Big</option>
        <option value="too_small">Too Small</option>
    </select>
    
    <label for="shouldersRanking">Ranking</label>
    <select id="shouldersRanking" class="complaintOpt complaintRanking">
        <option value="Null">Select</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</div>

JavaScript

$('.complaint select.complaintOpt').change(function() {
    var $container = $(this).parent(),
        $item = $container.find('.complaintItem'),
        itemId = $item.attr('id'),
        itemVal = $item.val(),
        itemName = $item.attr('name'),        
        itemText = $item.find('option[value=' + itemVal + ']').html(),         
        rank = $container.find('.complaintRanking').val();
    
    // Ignore if not a complete complaint
    if((itemVal == 'Null') || (rank == 'Null')) {
        return;
    }
    
    // Remove any existing complaint
    $('select.priorityIssue option.' + itemId).remove();
    
    // Add new complaint
    $('#priority' + rank + 'Issues')
        .append($('<option>' + itemName + '</option>').addClass(itemId));
});