JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    <input type="text" value="Group 1" data-id='123' data-val=''/>
    <select multiple>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</p>
<p>
    <input type="text" value="Group 2" data-id='abc' data-val=''/>
    <select multiple>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</p>

<hr>

<ul class="group" data-id='123'> <span>Group 1</span>
    <ul class="item"> <span>Item 1</span></ul>
    <ul class="item"> <span>Item 2</span></ul>
</ul>
    
<ul class="group" data-id='abc'> <span>Group 2</span>
    <ul class="item"> <span>Item 3</span></ul>
    <ul class="item"> <span>Item 4</span></ul>
</ul>

<hr>
<div></div>

JavaScript

$(document).ready(function(){
    $("input").each(function() {
         $(this).attr('data-val', this.value);
    });
});

// When changing INPUT:TEXT then update the UL>SPAN text based on the "data-id" attribute
$(document).on("change", "input", function () {
    var group = $(this).val();
    var id = $(this).data("id");
    $(this).attr('data-val', group);
    $("ul[data-id='" + id + "'] span:first").text(group);
});

// When changing either INPUT:TEXT or SELECT then update the list of assocuated groups
$(document).on("change", "select, input", function () {

    // Empty the debug DIV text
    $("div").text("");

    // Show all options from the first SELECT
    $("select:first option").each(function () {
        var txtOptionAvailable = $(this).text();

        $("div").append("<p><strong>" + txtOptionAvailable + "</strong></p>");

        // Show all groups
        $(".group > span").each(function () {
            var txtGroup = $(this).text();

            $("input[data-val='" + txtGroup + "']").next().find("option:selected").each(function () {

                var txtOptionSelected = $(this).text();

                // If the "available option" matches the "selected option"
                if (txtOptionAvailable == txtOptionSelected) {
                    $("div").append("<p>" + txtGroup + " has selected " + txtOptionSelected + "</p>");
                }
            });
        });
    });
});