JSFiddle - React, Tailwind, and code Playground

by Jim_Toth

HTML

<div>
<!-- data-h2List=h2ListASC || data-h2List=h2ListDESC  -->
<i id="supportH2List" data-h2List="h2ListASC"></i>

    <h1>10 Strange Facts About Hamburgers</h1>
    <img src="http://i0.wp.com/listverse.com/wp-content/uploads/2013/08/veggie_burger_photo_dpdt-e1375588661875.jpg" />
    <h2>The World’s Most Expensive Burger</h2>
    <h2>The World’s Worst Burger</h2>
    <h2>The Oprah Beef Scandal</h2>
    <h2>Monopoly Scandal</h2>
    <h2>The First Burger</h2>
    <h2>Veggie Burgers</h2>
    <h2>Meat Cologne</h2>
    <h2>Hundreds Of Cows</h2>
</div>

CSS

span.sortList{
    background: #3A3A3A;
    color: #F5ECCE;
    height: 25px;
    display: block;
    float: left;
    margin-right: 5px;
    text-align: center;
    line-height: 25px;
    padding: 0 5px;
}
img{width: 300px;height: auto;}

JavaScript

$('#supportH2List').parent().addClass($('#supportH2List').attr('data-h2List'));

$('div.h2ListDESC h2,div.h2ListASC h2').each(function($$counting) {
    var $$this = $(this);
    $('<span class="sortList"></span>').appendTo($$this);
    if($$this.parent().hasClass('h2ListASC')){
        $$this.find('span.sortList').text(++$$counting);
    }
});

if($('div.h2ListASC').length === 0){
    $(".sortList").text(function($$counting) {
        return $(".sortList").length-$$counting;
    });
}