Javascript jQuery追加字母数字

我真的为此挣扎了一段时间，所以我猜也许我知道解决办法

我创建了一个实时搜索（在搜索产品id后）显示一行，其中包含。。。类似这样的产品（简化）：

下面是一个产品列表，其中包含产品。这些产品按字母数字排序如下：

<div class="products_wrapper">
  <div id="78500">
     <!-- productinformation here -->
  </div>
  <div id="78501">
     <!-- productinformation here -->
  </div>

  (id 78524 should come here when clicked)

  <div id="78526">
    <!-- productinformation here -->
  </div>
</div>

（单击时，id 78524应显示在此处）

我想要的是：

当你点击

.live\u search\u product

产品时，它需要将自己置于正确的id升序之间，我无法理解这一点，也看不到背后的逻辑

你们能帮我往正确的方向推吗

---

非常感谢

您可以获取ID列表，对其进行排序，然后确定新元素应放置在哪个索引处，并将其插入

索引-1上的元素之后：


const$list=$（“#产品列表”）；
$（'.live\u search\u product'）。在（'单击'，函数（）上）{
const$this=$（this）；
常量thisId=+$this.attr（'id'）；
常量ID=[]；
$list.find（'div'）。每个（函数（）{
id.push（+$（this.attr（'id'））；
});
id.push（thisId）；
sort（函数（a，b）{返回a-b；}）；
const index=ids.findIndex（函数（el）{return el==thisId；}）；
$this.insertAfter（$list.find（'div'）.eq（index-1））；
});

产品78524信息产品信息产品信息[单击我]
名单：
产品78500信息产品信息产品信息
产品78501信息产品信息产品信息
（单击时，id 78524应显示在此处）
产品78526信息产品信息产品信息
您能详细说明一下预期的输出是什么吗？
<div class="products_wrapper">
  <div id="78500">
     <!-- productinformation here -->
  </div>
  <div id="78501">
     <!-- productinformation here -->
  </div>

  (id 78524 should come here when clicked)

  <div id="78526">
    <!-- productinformation here -->
  </div>
</div>