按升序和降序对带有 ID 的 DIV 进行排序

>我在尝试在 HTML/CSS/JAVASCRIPT 中按升序和降序对内容进行排序的按钮列表时遇到问题（即。食蚁兽、狒狒、猫...

最初，我想使用我的 BUTTON ID 进行排序，但我无法解决。

我在网上查找了一些使用 DIV/按钮内的文本工作的代码，但代码在我的页面上无法正常工作。

下面是工作的示例代码：

var $divs = $("button.bingo_button_4");
$('#alphBnt').on('click', function() {
  var alphabeticallyOrderedDivs = $divs.sort(function(a, b) {
    return $(a).find("h1").text() > $(b).find("h1").text();
  });
  $("#bingo_width_x").html(alphabeticallyOrderedDivs);
});
$('#numBnt').on('click', function() {
  var numericallyOrderedDivs = $divs.sort(function(a, b) {
    return $(a).find("h1").text() < $(b).find("h1").text();
  });
  $("#bingo_width_x").html(numericallyOrderedDivs);
});

body {
  background: #eee;
  font-family: sans-serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="alphBnt">Ascending</button>
  <button id="numBnt">Descending</button>
    <div id="bingo_width_x">
  <button class="bingo_button_4">
  <h1>B</h1><DIV>asdf</DIV>
  </button>
    
  <button class="bingo_button_4">
    <h1>A</h1><DIV>asdf</DIV>
  </button>
    
  <button class="bingo_button_4">
    <h1>D</h1><DIV>asdf</DIV>
  </button>
    
  <button class="bingo_button_4">
    <h1>C</h1><DIV>asdf</DIV>
  </button>
  <button class="bingo_button_4">
    <h1>E</h1><DIV>asdf</DIV>
  </button>
  
    <button class="bingo_button_4">
    <h1>F</h1><DIV>asdf</DIV>
  </button>
  
    <button class="bingo_button_4">
    <h1>G</h1><DIV>asdf</DIV>
  </button>
  
    <button class="bingo_button_4">
    <h1>H</h1><DIV>asdf</DIV>
  </button>
  
    <button class="bingo_button_4">
    <h1>U</h1><DIV>asdf</DIV>
  </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 $(a).find("idn").text() < $(b).find("idn").text();
    });
    $("#bingo_width").html(alphabeticallyOrderedDivs);
 }
  
}

.bingo_button_4 idn
{
  color: black;
  font-size: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="alphBnt" onclick=order_bingo_item('ascending');>Ascending</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="ID_grid_101_3_user" class="bingo_button_4">
    <idn>3</idn>    
    <div style="position:relative; width:100%; height:100%; text-align:center;"> 
    bear
    </div>
</button>
<button id="ID_grid_101_0_user" class="bingo_button_4">
    <idn>0</idn>    
    <div style="position:relative; width:100%; height:100%; text-align:center;"> 
    ant-eater
    </div>
</button>
<button id="ID_grid_101_15_user" class="bingo_button_4">
    <idn>15</idn>    
    <div style="position:relative; width:100%; height:100%; text-align:center;"> 
    cobra
    </div>
</button>
</div>

基本上，它没有在每个按钮中使用"idn"正确排序每个按钮。 我的按钮列表比这大得多，顺序都是错误的（就像随机顺序一样）。 似乎有什么问题？