JSFiddle - React, Tailwind, and code Playground

by TheNerdy97

HTML

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<link href="//cdn.datatables.net/1.10.18/css/dataTables.bootstrap.css" rel="stylesheet" />
<link href="//cdn.datatables.net/responsive/2.2.2/css/responsive.bootstrap.css" rel="stylesheet" />
<link href="//cdn.datatables.net/select/1.3.0/css/select.bootstrap.css" rel="stylesheet" />
<link href="//cdn.datatables.net/buttons/1.5.6/css/buttons.bootstrap.css" rel="stylesheet" />





			<li>
				<div class="input-group input-group-sm mb-3"></div>
					<input type="checkbox" id="Neli-1538"   name="Characters_Filter" value="1453">
					<label for="Neli-1538"><img src="https://i.postimg.cc/wTpVx/1538.png">
					</label> 	
			</li>	
			
			<li>
				<input type="checkbox" id="Momo-1539"   name="Characters_Filter" value="1451">
				<label for="Momo-1539"><img src="https://i.postimg.cc/d1nv/1539.png">
        <input class="filter-input" type="number" value="1">
				</label> 	
			</li>	




<br>
  

 <div class="text-center">
			<button class="btn btn-secondary" type="button" id="reset">Reset Filters</button>
            </div>
  



<div class="container">
  <h1>Table</h1>
  <table id="accountsTable" class="table table-striped table-bordered">

  </table>
</div>







<script src="//code.jquery.com/jquery-3.4.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.12.1/r-2.3.0/sp-2.0.2/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.12.1/r-2.3.0/sp-2.0.2/datatables.min.js"></script>
<script src="//cdn.datatables.net/1.10.18/js/dataTables.bootstrap.js">
  < script
  src = "https://cdn.datatables.net/select/1.4.0/js/dataTables.select.min.js" >
</script>
<script src="//cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.js"></script>
<script src="//cdn.datatables.net/buttons/1.5.6/js/buttons.bootstrap.js"></script>
<script...

CSS

/* Styles go here */


.filter-input{
    position: absolute;
    top: 64px;
    height: 22px;
    width: 100%;
    font-family: monospace;
    text-align: center;
    padding: 0;
    margin: 0;
    vertical-align: top;
    align-items: center;
}
ul {
	list-style-type: none;
  }
  
  li {
	display: inline-block;
  }
  
/*   input[type="checkbox"] {
    display: none;
  } */
  
  label {
	border: 1px solid #fff;
	padding: 10px;
	display: block;
	position: relative;
	margin: 10px;
	cursor: pointer;
  }
  
  label:before {
	background-color: white;
	color: white;
	content: " ";
	display: block;
	border-radius: 50%;
	border: 1px solid grey;
	position: absolute;
	top: -5px;
	left: -5px;
	width: 25px;
	height: 25px;
	text-align: center;
	line-height: 28px;
	transition-duration: 0.4s;
	transform: scale(0);
  }
  
  label img {
	height: 100px;
	width: 100px;
	transition-duration: 0.2s;
	transform-origin: 50% 50%;
	opacity:50%;
	width: 64px;
	height: 64px;
  margin:-20px;
  
  
  }
  
  :checked + label {
	border:2px;
	border-color:black;
	
	  
  
  }
  
  
  
  :checked + label img {
	transform: scale(0.9);
	/* box-shadow: 0 0 5px #333; */
	z-index: -1;
	opacity:100%;
	width: 64px;
	height: 64px;
	
  }

JavaScript

$('#reset').click(function(){
      const filters = document.getElementsByName("Characters_Filter");
      for (let i = 0; i < filters.length; i++) {
        if (filters[i].type = "checkbox") {
          filters[i].checked = false;

      $('#accountsTable').DataTable().draw();

  
        }
      }
      });


$(document).ready(function () {
  var dataJSON =
    "https://raw.githubusercontent.com/TheNerdy97/BraveGacha.io/main/d.json";
  var table = $("#accountsTable").DataTable({
    order: [[2, "asc"]],
    createdRow: addChildRow,

    columns: [
      {
        title: "Code",
        data: "code"
      },
      {
        title: "Orbs",
        data: "orbs",
        sortable: true,
        render: getOrbs
      },
      {
        title: "Price",
        data: "price",
        render: getPrice
      },
      {
        data: "images",
        className: "never"
      },
      {
        data: "date",
        className: "never"
      }
    ],

    deferRender: true,
    stateSave: true,
    processing: true,
    responsive: true,
    ajax: {
      url: dataJSON
    },

    columnDefs: [
      {
        width: "20%",
        targets: 0
      }
    ]
  });

  $(':checkbox[name="Characters_Filter"]').click(function () {
    var filter = "",
      regexFilter = true,
      smartFilter = false;

    filter = $('[name="' + this.name + '"]:checked')
      .map(function () {
        return (".*(" + this.value + ")");
        
      })
      .toArray()
      .join("+");

    $("#accountsTable")
      .dataTable()
      .fnFilter(filter, 3, regexFilter, smartFilter);
  });

  function addChildRow(row, data, index) {
    var accountDate = data.date;
    var accountImages = data.images;
    accountImages = JSON.stringify(accountImages);

    var ImagesString = accountImages.replace(/[{}]/g, "");

    var imagesArry = ImagesString.split(",");

    var iterator = imagesArry.values();
    var ImageTag = "";

    for (let ele of iterator) {
      ImageTag += '<img...