JSFiddle - React, Tailwind, and code Playground

by sunil puvvada

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  
  <div class="wrap">
    
    <button id="alphBnt">Alphabetical</button>
    
    <button id="numBnt">Numerical</button>
    
    <div class="box one">
      <h1>B<h1>
      <h2>10.35</h2>  
    </div>
    
    <div class="box two">
      <h1>A<h1>
      <h2>100.05</h2>
    </div>
    
    <div class="box three">
      <h1>D<h1>
      <h2>200</h2>  
    </div>
    
    <div class="box four">
      <h1>C<h1>
      <h2>5,510.25</h2>
    </div>
      
  </div>

CSS

body{
        background: #eee;
        font-family: sans-serif;
      }
      
      .box{
        background: red;
        height: 200px;
        width: 200px;
      }
      .box h1{
        color: white;
        font-size: 3.5em;
        text-align: center;
      }
      
      .box h2{
        color: black;
        font-size: 2.5em;
        text-align: center;
      }

JavaScript

$(function(){
	    
	    var alpha = [];
	    var number = [];
	    
	    $('.box').each(function(){
	      
	      var alphaArr = [];
	      var numArr = [];
	      
	      alphaArr.push($('h1', this).text());
	      alphaArr.push($(this));
	      alpha.push(alphaArr);
	      alpha.sort();
	      
	      numArr.push($('h2', this).text());
	      numArr.push($(this));
	      number.push(numArr);
	      number.sort(function(a,b){
	        return a-b
	      });
	    })
	    
	    $('#alphBnt').on('click', function(){
	      $('.box').remove();
	      for(var i=0; i<alpha.length; i++){
	        $('.wrap').append(alpha[i][1]);
	      }
	    })
	    
	    $('#numBnt').on('click', function(){
	      $('.box').remove();
	      for(var i=0; i<number.length; i++){
	        $('.wrap').append(number[i][1]);
	      }
	    })
	    
	  });