JSFiddle - React, Tailwind, and code Playground

by Larsen

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="but"><button class="btn">Цена</button></div>

<div id="products">
  
  <div class="col-xs-4">
    <div class="product">
      <div class="title">TITLE 1</div>
      <span class="woocommerce-Price-amount">
        100
        <span class="woocommerce-Price-currencySymbol"> руб.</span>
      </span>
    </div>
  </div>
    <div class="col-xs-4">
    <div class="product">
      <div class="title">TITLE 2</div>
      <span class="woocommerce-Price-amount">
        500
        <span class="woocommerce-Price-currencySymbol"> руб.</span>
      </span>
    </div>
  </div>
    <div class="col-xs-4">
    <div class="product">
      <div class="title">TITLE 3</div>
      <span class="woocommerce-Price-amount">
        234
        <span class="woocommerce-Price-currencySymbol"> руб.</span>
      </span>
    </div>
  </div>
    <div class="col-xs-4">
    <div class="product">
      <div class="title">TITLE 4</div>
      <span class="woocommerce-Price-amount">
        45
        <span class="woocommerce-Price-currencySymbol"> руб.</span>
      </span>
    </div>
  </div>
    <div class="col-xs-4">
    <div class="product">
      <div class="title">TITLE 5</div>
      <span class="woocommerce-Price-amount">
        706
        <span class="woocommerce-Price-currencySymbol"> руб.</span>
      </span>
    </div>
  </div>
  
</div>

CSS

.product{
  background: #eee;
  border: 1px solid #ddd;
  padding: 15px;
}
.title{
  text-align: center;
  font-weight: 800;
  margin-bottom: 16px;
}
.but{
  margin-bottom: 25px;
  margin-top: 20px;
  text-align: center;
}

JavaScript

$('.but .btn').click(function(e){
  $(this).toggleClass('Up');

  if( $('.btn').hasClass('Up') ){
  var dist = $('.product').find('.woocommerce-Price-amount');
   console.log(dist);
   
    dist.sort(function(b, a){
      return parseInt( $(a).text() ) - parseInt( $(b).text() );
    });
    $('#products').append(dist);
  }
});