How to order bootstrap panels in a grid when a new value is added?

I have a grid based on bootstrap 3 with col / rows inside each col there is a panel with a value, the values are got from DB yet ordered but the user could add a new panel manually and i would be able to set it ordered correctly..

like my grid could contain

1 2 3 +

when + is clicked the user could add 4 that should be added after 3 or he could add 1.50 which should be added before 2 and so on

Here is how my grid looks like with an example of static add

$('.add').on("click", function() { // in live version i'm adding new col after AJAX request response is gone OK
  $('<div>', {
    class: 'col-md-3'
  }).append(
    $('<div>', {
      class: 'panel panel-default taglio'
    }).append(
      $('<div>', {
        class: 'panel-body text-center'
      }).text("€" + parseFloat(1.50).toFixed(2).replace(/B(?=(d{3})+(?!d))/g, "."))
    ).data('id', -1)
  ).insertBefore($(this).parent());
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="row">
  <div class="col-md-3">
    <div class="panel panel-default taglio">
      <div class="panel-body text-center">€10.00</div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="panel panel-default taglio">
      <div class="panel-body text-center">€15.00</div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="panel panel-default taglio">
      <div class="panel-body text-center">€5.00</div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="panel panel-default taglio">
      <div class="panel-body text-center">€10.00</div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="panel panel-default add" data-toggle="modal" data-target="#modalAdd">
      <div class="panel-body text-center">+</div>
    </div>
  </div>
</div>

So how could i reorder the panels each time a new item is added?

Answer

As, you are displaying prices inside your div you can use .find and .replace to get exact price from divs and compare them inside sort function then append sorted divs inside your main div again.

Demo Code :

$(document).on("click", ".add", function() {
  $('<div>', {
    class: 'col-md-3'
  }).append(
    $('<div>', {
      class: 'panel panel-default taglio'
    }).append(
      $('<div>', {
        class: 'panel-body text-center'
      }).text("€" + parseFloat(7.50).toFixed(2).replace(/B(?=(d{3})+(?!d))/g, "."))
    ).data('id', -1)
  ).insertBefore($(this).parent());
  //sort your divs
  var result = $('div.mian_div > div').sort(function(a, b) {
    //get price 
    var contentA = parseFloat($(a).find('.taglio > div').text().replace('€', '').trim());
    var contentB = parseFloat($(b).find('.taglio > div').text().replace('€', '').trim());
    return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
  });
  $('div.mian_div').html($(result)) //add result
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="row mian_div">
  <div class="col-md-3">
    <div class="panel panel-default taglio">
      <div class="panel-body text-center">€10.00</div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="panel panel-default taglio">
      <div class="panel-body text-center">€15.00</div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="panel panel-default taglio">
      <div class="panel-body text-center">€5.00</div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="panel panel-default taglio">
      <div class="panel-body text-center">€10.00</div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="panel panel-default add" data-toggle="modal" data-target="#modalAdd">
      <div class="panel-body text-center">+</div>
    </div>
  </div>
</div>

Advertisement

Answer