JSFiddle - React, Tailwind, and code Playground

by eventide

HTML

<table border="1">
    <tr class="zipCodeRow">
        <td width="87px">	<a class="hideOnEdit zipCodeFormSubmit" name="196" href="#">Edit</a>

            <input
            type="submit" class="hideOnLoad submitEditZipCodeRow zipCodeFormSubmit"
            id="submitEditZipCodeRow-196" value="Save Edits">
                <br>
                <input type="submit" class="hideOnLoad cancelEditZipCodeRow zipCodeFormSubmit"
                value="Cancel Edit">
        </td>
        <td width="45px">
            <input type="checkbox" class="chkDeleteZipCodeRow zipCodeFormSubmit" name="deleteZipCodeRow[]"
            value "196"="">
        </td>
        <td width="157px">
            <label class="hideOnEdit">CA - California</label>
            <input type="text" class="hideOnLoad" size="20"
            maxlength="50" value="CA - California" <="" td="">
        </td>
        <td width="127px">
            <label class="hideOnEdit">Santa Clara</label>
            <input type="text" class="hideOnLoad" size="15" maxlength="50"
            value="Santa Clara" <="" td="">
        </td>
        <td width="157px">
            <label class="hideOnEdit">SAC - Northern California</label>
            <input type="text" class="hideOnLoad"
            size="20" maxlength="50" value="SAC - Northern California" <="" td="">
        </td>
        <td width="343px">
            <div class="zipCodesList" style="width: 343px; height: 100px; overflow: hidden;">
                <label class="hideOnEdit">94022, 94023, 94024, 94035, 94039, 94040, 94041, 94042, 94043, 94085,
                    94086, 94087, 94088, 94089, 94301, 94302, 94303, 94304, 94305, 94306, 94309,
                    95002, 95008, 95009, 95011, 95013, 95014, 95015, 95020, 95021, 95026, 95030,
                    95031, 95032, 95035, 95036, 95037, 95038, 95042, 95044, 95046, 95050, 95051,
                    95052, 95053, 95054, 95055, 95056, 95070, 95071, 95101, 95103, 95106, 95108,
                    95109, 95110,...

CSS

body {
    font-size: 70%;
    font-family: Arial;
}
.hideOnLoad {
    display: none;
}
textarea.hideOnLoad {
    overflow: visible;
}

JavaScript

var buttonClicked;
$('.zipCodeFormSubmit').click(function () {
    buttonClicked = $(this).attr('name');

    if ($(this).text() == 'Edit') {
        EditTableRow($(this));
        return false;
    } else if ($(this).text() == 'More...') {
        $(this).prev().css({
            'overflow': 'visible'
        });
        return false;
    } else if ($(this).attr('value') == 'Cancel Edit') {
        //alert ($(this).attr('value'));
        CancelEdit($(this));
        return false;
    }
});

function EditTableRow(linkClicked) {

    var id = linkClicked.attr('name'),
        state = linkClicked.parent().next().next().text(),
        county = linkClicked.parent().next().next().next().text(),
        city = linkClicked.parent().next().next().next().next().text(),
        zipCodes = linkClicked.parent().next().next().next().next().next().text(),
        row = linkClicked.parent().parent();

    row.find('.hideOnEdit').fadeOut(500);
    row.find('.hideOnLoad').delay(500).fadeIn(500);
}

function CancelEdit(buttonClicked) {
    var row = buttonClicked.parent().parent();
    row.find('.hideOnLoad').fadeOut(500);
    row.find('.hideOnEdit').delay(500).fadeIn(500);
}