JSFiddle - React, Tailwind, and code Playground

by GaryC123

HTML

<table>
    <tr>
        <td> <span name="loads-0-couple_ind" class="span-xcoupled">INCLUDED</span>

            <input name="loads-0-couple_ind" class="hidden-xcoupled" value="YES" type="hidden">
            <select name="loads-0-couple_ind" class="input-xcoupled" style="display: none">
                <option value="YES">Included</option>
                <option value="NO">XCoupled</option>
            </select>
        </td>
    </tr>
    <tr>
        <td> <span class="span-xcoupled" name="loads-0-couple_ind">INCLUDED</span>

            <input type="hidden" value="YES" class="hidden-xcoupled" name="loads-0-couple_ind">
            <select style="display: none" class="input-xcoupled" name="loads-0-couple_ind">
                <option value="YES">Included</option>
                <option value="NO">XCoupled</option>
            </select>
        </td>
    </tr>
    <tr>
        <td> <span name="loads-0-couple_ind" class="span-xcoupled">XCOUPLED</span>

            <input name="loads-0-couple_ind" class="hidden-xcoupled" value="NO" type="hidden">
            <select name="loads-0-couple_ind" class="input-xcoupled" style="display: none">
                <option value="YES">Included</option>
                <option value="NO">XCoupled</option>
            </select>
        </td>
    </tr>
    <tr>
        <td> <span name="loads-0-couple_ind" class="span-xcoupled">XCOUPLED</span>

            <input name="loads-0-couple_ind" class="hidden-xcoupled" value="NO" type="hidden">
            <select name="loads-0-couple_ind" class="input-xcoupled" style="display: none">
                <option value="YES">Included</option>
                <option value="NO">XCoupled</option>
            </select>
        </td>
    </tr>
</table>
<button id="editbutton">Edit</button>

JavaScript

$("#editbutton").click(function () {
    $(".input-xcoupled").each(function () {

        spanText = $(this).prev().prev().text()
        spanText == "INCLUDED" ? spanText = "Included" : spanText = "XCoupled";
        $("option", this).filter(function () {
            return this.text == spanText;
        }).attr('selected', true);



    })
    $(".span-xcoupled").hide()
    $(".input-xcoupled").show()
})