jquery - Hide/Show Divs with Javascript and sort by value? -

i have these 2 scripts, 1 sorts divs value in div class (price) , other shows or hides divs based on class name buttons. (box a, box b etc, inside "parent" class.)

the problem not work together, can show class not sort results price, price sorting works on divs @ once, , breaks after, need reload.

fiddle:

https://jsfiddle.net/qjwl1pqa/4

is there way have single script both? lets show hide divs based on class, , sort results price (ascending / descending) , vice verse?

i hope makes sense.

script showing / hiding divs based on class name:

var $boxs = $("#parent > .box"); var $btns = $(".btn").on("click", function() {  var active =  $btns.removeclass("active")   .filter(this)   .addclass("active")   .data("filter");  $boxs .hide() .filter( "." + active ) .fadein(450);  }); 

script sorting divs based on class value:

$('#byprice').on('click', function () {  $('#parent div.price').map(function () {   return {val: parsefloat($(this).text(), 10), el: this.parentnode};  }).sort(function (a, b) {   return a.val - b.val;  }).map(function () {   return this.el;  }).appendto('#parent'); }); $('#byprice1').on('click', function () {  $('#parent div.price').map(function () {    return {val: parsefloat($(this).text(), 10), el: this.parentnode};  }).sort(function (a, b) {    return b.val - a.val;  }).map(function () {    return this.el;  }).appendto('#parent'); }); 

example product div:

 <div id="parent">      <div class="box a">         <div class="product_box">                <div class="price">19.99</div>             </div>     </div>   <div/> 

i have modified fiddle code bit. please check , let me know if looking for:

http://jsfiddle.net/qjwl1pqa/6/

did following modifications:

1) removed btn class sorting buttons:

<button class="" id="byprice">by price ￪</button> <button class="" id="byprice1">by price ￬</button>  

2) sorting need consider prices visible, modified code follows:

$('#parent div.price:visible').map(function () { 

3) referring top div node class box while iterating:

el: this.parentnode.parentnode 

hope you.