JSFiddle - React, Tailwind, and code Playground

by jessekinsman

HTML

<table class="resource-detail">
    <tbody>
        <tr>
            <td class="descr"><h3><span class="iceOutTxt" id="_3_WAR_WDF_UCM_INSTANCE_4Ygi_:j_id3:j_id10:1:j_id24:7:j_id30:0:j_id34">June - Foundations Family Newsletter Primary - English/Spanish</span></h3> <p><span class="iceOutTxt" id="_3_WAR_WDF_UCM_INSTANCE_4Ygi_:j_id3:j_id10:1:j_id24:7:j_id30:0:j_id36">Newsletters communicate tips &amp; strategies to the family that are aligned to the monthly themes in the student planner.</span></p></td><td class="image"><a href="http://ssiucm.schoolspecialty.com/ucm/groups/public/@guestmktgpremier/documents/webcontent/x084278.pdf" id="_3_WAR_WDF_UCM_INSTANCE_4Ygi_:j_id3:j_id10:1:j_id24:7:j_id30:0:j_id38"><img alt="Image" height="80" src="http://ssiucm.schoolspecialty.com/ucm/groups/public/@guestmktgpremier/documents/webcontent/x084278@t~2.jpg"></a></td><td class="date"><span class="iceOutTxt" id="_3_WAR_WDF_UCM_INSTANCE_4Ygi_:j_id3:j_id10:1:j_id24:7:j_id30:0:outputTextDateId">08/23/2012 22:12</span></td><td class="download"><span class="iceOutTxt" id="_3_WAR_WDF_UCM_INSTANCE_4Ygi_:j_id3:j_id10:1:j_id24:7:j_id30:0:j_id42">PDF</span> / <a href="http://ssiucm.schoolspecialty.com/ucm/groups/public/@guestmktgpremier/documents/webcontent/x084278.pdf" id="_3_WAR_WDF_UCM_INSTANCE_4Ygi_:j_id3:j_id10:1:j_id24:7:j_id30:0:j_id44">Download</a></td></tr> <tr><td class="descr"><h3><span class="iceOutTxt" id="_3_WAR_WDF_UCM_INSTANCE_4Ygi_:j_id3:j_id10:1:j_id24:7:j_id30:1:j_id34">November - Foundations Family Newsletter Primary - English/Spanish</span></h3> <p><span class="iceOutTxt" id="_3_WAR_WDF_UCM_INSTANCE_4Ygi_:j_id3:j_id10:1:j_id24:7:j_id30:1:j_id36">Newsletters communicate tips &amp; strategies to the family that are aligned to the monthly themes in the student planner.</span></p></td><td class="image"><a href="http://ssiucm.schoolspecialty.com/ucm/groups/public/@guestmktgpremier/documents/webcontent/x084270.pdf"...

CSS

table tr td {
    padding: 10px 0;
    background: silver;
    border-bottom: 2px solid white;
}

JavaScript

sortBy(".resource-detail .descr h3 span");

function sortBy() {
    alert(arguments.length);
     var rowContainer = "tbody"; 
     var rowSelector = "tr";
            
    switch (arguments.length) {
        case 0:
        alert("You must pass in a selector by which to sort");
        return;
        break;
      case 1:
        var sortSelector= arguments[0];
        break;
      case 2:
        var sortSelector= arguments[0];
        var rowContainer = arguments[1]; 
        break;
      case 3:
        var sortSelector= arguments[0];
        var rowContainer = arguments[1]; 
        var rowSelector = arguments[2];
        break;                   
    }
    
    if (jQuery(sortSelector).length == 0 ) {
        alert(sortSelector + " doesn't appear to match any items in the dom");
        return;
    }
    if (rowSelector !== "tr"  && jQuery(rowSelector).length == 0) {
        alert(rowSelector + " doesn't appear to match any items in the dom");
        return;
    }
        if (rowContainer !== "tbody"&&jQuery(rowContainer).length == 0) {
        alert(rowContainer + " doesn't appear to match any items in the dom");
        return;
    }
    var schoolYear = new Array("august","september","october","november","december","january","february","march","april","may","june","july");
    var appendRow = new Array();
    var rIndex = 0;
    var tableBody = jQuery(sortSelector).parents(rowContainer);
    //Done checking arguments
    //alert(jQuery(sortSelector).length);
    if(jQuery(sortSelector).length <= 1) {
    //alert("You only one have item to sort");
    }
    else {
        alert(schoolYear.length);
        for (var i=0; i < schoolYear.length; i++) {
            //alert("i var " + i);
        var searchText = schoolYear[i];
            jQuery(sortSelector).each(function(index) {
                var sortText = jQuery(this).text().toLowerCase();
                //alert("sort text " + sortText);
                
                    if...