JSFiddle - React, Tailwind, and code Playground

HTML

<table class="reportResults">
    <thead>
        <tr>
            <td>How to get there</td>
            <td>Description</td>
        </tr>
    </thead>
    <tr>
        <td>
            <select>
                <option>Hello</option>
                <option>World</option>
            </select>
        </td>
        <td>
            <span>You selected the first option</span>
            <span>You selected the second option</span>
        </td>
    </tr>
     <tr>
        <td>
            <select>
                <option>Walk</option>
                <option>Linousine</option>
            </select>
        </td>
        <td>
            <span>I'll meet you there</span>
            <span>Nice</span>
        </td>
    </tr>
</table>

CSS

.reportResults thead tr {text-align:left; color:white; background-color:#c00}
.reportResults tr {border-bottom:1px dashed #ccc}
.reportResults td {padding:0.25em}
.reportResults td span {display:none} /* hide all by default */

JavaScript

$(document).ready(function () {
    $("#state").change(function(){
        showHideOptionSpans();
    }
	showHideOptionSpans();
});

function page_Load() {
	showHideOptionSpans();
});



function showHideOptionSpans() {
    console.log('showHide()');
    
	$(".reportResults tr").each(function () {
        $(this).find("span").hide(); /* hide all spans */
		var idx = $(this).find("select:eq(0) option:selected").index();
		if (idx = -1) { idx = 0; }	// if no option is selected, default to first
		$(this).find("span:eq(" + idx + ")").show();
	});
}