JSFiddle - React, Tailwind, and code Playground

by Valerie Ren

HTML

<div class="editContainer">
        <table class="editObjectsTable">
            <tr>
                <td class="pageOrderNum" rowspan="2">1.</td>
                <td rowspan="2" class="objectName">Paragraph</td>
                <td class="settingType">Text Content</td><td class="settingType">Text Alignment</td>
                <td class="settingType">Highlight</td>
                <td class="objectControlButtonHolder" rowspan="2">
                    <button class="deleteObjectBtn">X</button>
                    <input id="objID" type="hidden" value="181" />
                </td>
            </tr>
            <tr>
                <td class="textAreaHolder">
                    <textarea maxlength="4000" class="editTextArea">Please accept our invitation to participate in the Connect-CTY notification service. We know your personal information is important, and rest assured that we will not share it with anyone. If you have NOT already received a test phone call from us, or you would like to provide additional contact information, click the Connect-CTY image below to sign up.</textarea>
                </td>
                <td class="alignmentTableHolder">
                    <table class="alignmentTable">
                        <tr>
                            <td class="alignmentRadioHolder">
                            <input id="inputRadioLeft181" type="radio" name="paragraphAlignment181" value="left" />
                            </td>
                            <td class="alignmentRadioHolder">
                                <input id="inputRadioCenter181" type="radio" checked="checked" name="paragraphAlignment181" value="center" />
                            </td>
                            <td class="alignmentRadioHolder">
                                <input id="inputRadioRight181" type="radio" name="paragraphAlignment181" value="right" />
                            </td>
                            <td class="alignmentRadioHolder">
             ...

CSS

div.editContainer
    {
        width: 94%;
        height: 400px;
        overflow-y: scroll;
        border: 1px solid #000;
        text-align: center;
        margin: auto;
        resize: vertical;
    }
    
    div.editPreview
    {
        width: 852px;
        margin-left: 0px;
        padding-top: 15px;
        border-top: 5px double #003500;
    }
    
    .editLabelTitle
    {
        font-size: 1.5em;
        font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
        font-weight: bold;
        color: #003500;
    }
    
    table.editObjectsTable
    {
        width: 100%;
        margin: auto;
        border: 1px solid #888;
        cursor: pointer;
        -moz-user-select: -moz-none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-color: #ffecb4;
        /* Opera 11.10+ */
        background: -o-linear-gradient(bottom, #f5d77d, #ffecb4);
        /* Firefox 3.6+ */
        background: -moz-linear-gradient(bottom, #f5d77d, #ffecb4);
        /* Chrome 7+ & Safari 5.03+ */
        background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #f5d77d), color-stop(1, #ffecb4));
        /* Newer Browsers */
        background: linear-gradient(bottom, #f5d77d, #ffecb4);
        /* IE8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffecb4,EndColorStr=#f5d77d)";
        /* IE5.5 - IE7 */
        filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffecb4,EndColorStr=#f5d77d);
    }
    

    
    table.editObjectsTable tr td
    {
        border-left: 1px dashed #888;
    }
    
    td.objectName
    {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: #22862a;
        vertical-align: middle;
        padding-right: 5px;
        border-left: none !important;
    }
    
    input.editTextInputCenter
    {
        width:...

JavaScript

$(".editContainer").sortable({
        revert: true,
        cursor: "move",
        stop: function (event, ui) {
            $(this).find(".editObjectsTable").each(function () {
                console.log($(this).find(".pageOrderNum").text());
            });
        }
    });