<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <button id="alphBnt" onclick=order_bingo_item('ascending');>Ass</button> <button id="numBnt" onclick=order_bingo_item('descending');>Descending</button> <div id="bingo_width" class="bingo_width" style="border:solid 2px; width:px;"> <button id="" class="bingo_button_4"> <idn>3</idn> </button> <button id="" class="bingo_button_4"> <idn>0</idn> </button> <button id="" class="bingo_button_4"> <idn>15</idn> </button> </div>

function order_bingo_item(text_order) { var order_type = text_order; var $divs = $("button.bingo_button_4"); if (order_type=='ascending') { var alphabeticallyOrderedDivs = $divs.sort(function (a, b) { return $(a).find("idn").text() - $(b).find("idn").text(); }); $("#bingo_width").html(alphabeticallyOrderedDivs); } else if (order_type=='descending') { var alphabeticallyOrderedDivs = $divs.sort(function (a, b) { return $(b).find("idn").text() - $(a).find("idn").text(); }); $("#bingo_width").html(alphabeticallyOrderedDivs); } }