JSFiddle - React, Tailwind, and code Playground

HTML

<div class="product-wrap">
	<ul class="products">
        <li class="first post-193 product type-product status-publish has-post-thumbnail product_cat-c-8-concrete product_cat-california-online-practice-exams product_tag-pro-7 taxable shipping-taxable purchasable product-type-simple product-cat-c-8-concrete product-cat-california-online-practice-exams product-tag-pro-7 instock">
            <h3>Pro 7</h3>
        </li>
        <li class="post-277 product type-product status-publish has-post-thumbnail product_cat-c-53-swimming-pool product_cat-california-online-practice-exams product_tag-pro-18 taxable shipping-taxable purchasable product-type-simple product-cat-c-53-swimming-pool product-cat-california-online-practice-exams product-tag-pro-18 instock">
            <h3>Pro 18</h3>
        </li>
        <li class="post-197 product type-product status-publish has-post-thumbnail product_cat-c-9-drywall product_cat-california-online-practice-exams product_tag-pro-8 taxable shipping-taxable purchasable product-type-simple product-cat-c-9-drywall product-cat-california-online-practice-exams product-tag-pro-8 instock">
            <h3>Pro 8</h3>
        </li>
        <li class="last post-284 product type-product status-publish has-post-thumbnail product_cat-c-54-ceramic-tile product_cat-california-online-practice-exams product_tag-pro-19 taxable shipping-taxable purchasable product-type-simple product-cat-c-54-ceramic-tile product-cat-california-online-practice-exams product-tag-pro-19 instock">
            <h3>Pro 19</h3>
        </li>
        <li class="first post-202 product type-product status-publish has-post-thumbnail product_cat-c-10-electrical product_cat-california-online-practice-exams product_tag-pro-9 taxable shipping-taxable purchasable product-type-simple product-cat-c-10-electrical product-cat-california-online-practice-exams product-tag-pro-9 instock">
            <h3>Pro 9</h3>
        </li>
        <li class="post-221 product type-product status-publish...

CSS

h1, h2, h3, h4, h5, h6{ font-weight:normal; margin:0; font-size:16px;}
.product-wrap{ margin:0px auto; width:960px;}
.products{ list-style:none; border:1px solid #000; padding:0; margin:0;}
.products li{ border-bottom:1px solid #000; padding:0 10px;}
.products li:last-child{ border-bottom:0px none;}

JavaScript

var productContainer = $('.product-wrap').find('ul.products');
var lines = productContainer.find('li');
var numbers = lines.each(function(){
    return parseInt($(this).attr('class').split('post-')[1].split(' ')[0])
});
var sorted = numbers.sort(function(a, b){return a-b});
$.each(sorted, function(){
    productContainer.append($('.post-' + this));
});