JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main-block-content">
<table class="tftable scroll" border="1">
    <tbody><tr class="fixed">
		<th>#</th>
		<th>
<div class="subject-tile" style="width: auto;">
<div class="subject-tile-img-wrapper rounded" style="padding-bottom: 15px;padding-top: 7px;">
<a href="http://pokupatel.pro/dom/bytovaya-tehnika/belaya-tehnika/"><img class="img-fluid" src="/templates/pokupatel/images/icons/Белая техника.png" data-toggle="tooltip" data-placement="top" title="" alt="Белая техника" style="width: auto;height: auto;" data-original-title="Белая техника"></a>
</div>
</div>
    <br> <input type="checkbox" name="category71" class="chk-all"> <span class="red">В наличии</span>
    <br><input type="checkbox" name="category71" class="chk-all"> <span class="green">Под заказ</span>
</th><th>
<div class="subject-tile" style="width: auto;">
<div class="subject-tile-img-wrapper rounded" style="padding-bottom: 15px;padding-top: 7px;">
<a href="http://pokupatel.pro/dom/bytovaya-tehnika/vstroennaya-tehnika/"><img class="img-fluid" src="/templates/pokupatel/images/icons/Встроенная техника.png" data-toggle="tooltip" data-placement="top" title="" alt="Встроенная техника" style="width: auto;height: auto;" data-original-title="Встроенная техника"></a>
</div>
</div>
    <br> <input type="checkbox" name="category72" class="chk-all"> <span class="red">В наличии</span>
    <br><input type="checkbox" name="category72" class="chk-all"> <span class="green">Под заказ</span>
</th><th>
<div class="subject-tile" style="width: auto;">
<div class="subject-tile-img-wrapper rounded" style="padding-bottom: 15px;padding-top: 7px;">
<a href="http://pokupatel.pro/dom/bytovaya-tehnika/klimaticheskaya-tehnika/"><img class="img-fluid" src="/templates/pokupatel/images/icons/Климатическая техника.png" data-toggle="tooltip" data-placement="top" title="" alt="Климатическая техника" style="width: auto;height: auto;" data-original-title="Климатическая техника"></a>
</div>
</div>
    <br> <input type="checkbox"...

CSS

.main-block {
				padding: 12px;
				background: #fff;
				border: 1px #e5e5e5 solid;
				margin: 0 0 20px 0;
			}
			
				.main-block-title {
					border-bottom: 1px #efefef solid;
					padding: 0 0 10px 35px;
					margin: 0 0 10px 0;
					color: #000;
					font-size: 16px;
					font-weight: bold;
					text-transform: uppercase;
					position: relative;
				}
				
					.main-block-title img {
						position: absolute;
						left: 0px;
						top: 0px;
					}
					
				.main-block-content {
					
				}
				
					.top-news {
    display: block;
    float: left;
    width: 20%;
    padding: 15px 0px 9px 0px;
    margin: 0 0px 10px 0;
    background: url(../images/top-news.png) left bottom repeat-x;
    position: relative;
    min-height: 24px;
    }

JavaScript

$(function() {
var $table = $('table.tftable');
$table.on('change', '.chk-all', function() {
  var
    index = $(this).closest('th').index() + 1,
    selector = `td:nth-child(${index}) input[type="checkbox"]`,
    checked = this.checked;

  $table.find(`tr ${selector}`).prop('checked', checked);
  $table.find('tr').slice(1).detach().sort(function(a, b) {
    var
      aGreen = $(a).find(selector).hasClass('black'),
      bGreen = $(b).find(selector).hasClass('black');

    return (bGreen ^ aGreen) ? [1, -1][+(checked ^ bGreen)] : 0;
  }).appendTo($table);
});
            });
        $(function () {
  $('[data-toggle="tooltip"]').tooltip()
})