JSFiddle - React, Tailwind, and code Playground

by Mawel Don

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<button class="SWAAAAAG">
CLICK ME AND TRY TO UNDERSTAND
</button>
<button class="Reverse">
Click me To sort in reverse
</button>
<table class="rwd-table">
    <tbody><tr>
      <th>Date de départ</th>
      <th>Destination</th>
      <th>Hôtel / Séjour</th>
      <th>Ville de départ</th>
      <th>Prix</th>
      <th>Réduction</th>
      <th>Réserver</th>
    </tr>
        <tr class="productsDispo">
      <td data-th="Date de départ : ">samedi 2 avril</td>
      <td data-th="Destination : ">Barbade</td>
      <td data-th="Hôtel / Séjour : ">LES COULEURS DU PARADIS - CROISIÈRE AU DÉPART DE FORT-DE-FRANCE (MARTINIQUE)</td>
      <td class="villes" data-th="Ville de départ : ">Paris</td>
      <td data-th="Prix : ">1683€*</td>
      <td data-th="Réduction : ">
            </td>
      <td><a href="/les-couleurs-du-paradis_95793"><button>RÉSERVER</button></a></td>
    </tr>
        <tr class="productsDispo">
      <td data-th="Date de départ : ">samedi 2 avril</td>
      <td data-th="Destination : ">Chypre</td>
      <td data-th="Hôtel / Séjour : ">AUTOTOUR - L'ILE D'APHRODITE - LARNACA / PAPHOS</td>
      <td class="villes" data-th="Ville de départ : ">Paris</td>
      <td data-th="Prix : ">642€*</td>
      <td data-th="Réduction : ">
                          -4 %
                      </td>
      <td><a href="/autotour-lile-daphrodite-larnaca-paphos_18593"><button>RÉSERVER</button></a></td>
    </tr>
        <tr class="productsDispo">
      <td data-th="Date de départ : ">dimanche 3 avril</td>
      <td data-th="Destination : ">Grèce</td>
      <td data-th="Hôtel / Séjour : ">
            Îles grecques avec le Costa Deliziosa
         </td>
      <td class="villes" data-th="Ville de départ : ">Venise</td>
      <td data-th="Prix : ">502€*</td>
      <td data-th="Réduction : ">
            </td>
      <td><a href="/iles-grecques-avec-le-costa-deliziosa_104895"><button>RÉSERVER</button></a></td>
  ...

JavaScript

$('.SWAAAAAG').click(function(){
  $length = $('[data-th="Prix : "]').length;
  $dispo = $('.productsDispo');
  $temp = 0;
  for(var i = 0; i < $length; i++)
  {   
      for(var j = i; j < $length; j++)
      {
          $prixI = $($dispo[i]).find($('[data-th="Prix : "]')).text().slice(0, $($dispo[i]).find($('[data-th="Prix : "]')).text().length-2);
          $prixJ = $($dispo[j]).find($('[data-th="Prix : "]')).text().slice(0, $($dispo[j]).find($('[data-th="Prix : "]')).text().length-2);

          if(parseInt($prixI) < parseInt($prixJ))
          {
            $temp = $dispo[i];
            $dispo[i] = $dispo[j];
            $dispo[j] = $temp;
          }
      }
  }
  for(var i = 0; i < $length; i++)
  {  
      $('.rwd-table tbody').append($dispo[i])
  }
})

$('.Reverse').click(function(){
  $length = $('[data-th="Prix : "]').length;
  $dispo = $('.productsDispo');
  $temp = 0;
  for(var i = 0; i < $length; i++)
  {   
      for(var j = i; j < $length; j++)
      {
          $prixI = $($dispo[i]).find($('[data-th="Prix : "]')).text().slice(0, $($dispo[i]).find($('[data-th="Prix : "]')).text().length-2);
          $prixJ = $($dispo[j]).find($('[data-th="Prix : "]')).text().slice(0, $($dispo[j]).find($('[data-th="Prix : "]')).text().length-2);

          if(parseInt($prixI) > parseInt($prixJ))
          {
            $temp = $dispo[i];
            $dispo[i] = $dispo[j];
            $dispo[j] = $temp;
          }
      }
  }
  for(var i = 0; i < $length; i++)
  {  
      $('.rwd-table tbody').append($dispo[i])
  }
})