使用jQuery实现点击按钮追加带顺序编号div的方法

你现有代码无法实现序号正常递增的核心原因有两个：

1. 动态生成的元素使用了重复全局id：HTML规范要求id必须在页面全局唯一，原生document.getElementById("num")在遇到多个同id元素时，只会返回文档流中第一个匹配的节点，无论你怎么更新divCount，修改的永远是第一个生成div里的序号，后面新生成的div的序号始终是空值。
2. 元素赋值的时机和选择逻辑错误：你在把新div追加到页面之后，才去查找id为num的元素赋值，永远无法选中刚生成的那个目标节点。
   另外你写的外层类名class=item-wrapper-${divCount}没有加引号，会导致浏览器解析HTML时出现样式识别异常。

直接调整模板拼接逻辑，去掉所有重复id，在拼接DOM的时候就把序号嵌入对应位置，不需要等元素插入页面后再做查找赋值：

• 把所有重复的id（num/product/productName/sellPrice/amount）替换为语义化类名，避免选择冲突
• 给动态生成的删除按钮绑定事件委托，适配动态元素的点击响应
• 额外补全序号重排逻辑，删除中间项后剩余元素会自动连续编号，不会出现序号断档

<!-- 基础HTML结构 -->
<div class="productDiv"></div>
<div class="mt-3 text-center">
  <button class="btn profile-button" style="color: white" type="button" id="btnAddtoList">Add Product</button>
</div>

$(function() {
  var divCount = 0;
  // 绑定新增按钮点击事件
  $('#btnAddtoList').click(function(){
    divCount++;
    // 拼接DOM时直接嵌入对应序号
    var newDiv = $(`
      <div class="item-wrapper-${divCount}">
        <div class="container rounded bg-white mt-3 mb-3">
          <div class="row">
            <div class="col-md-12">
              <div class="row mt-3">
                <span>
                  <strong>Div Number #<span class="item-num">${divCount}</span></strong>
                </span>
              </div>
              <div class="row mt-1">
                <select class="product_option form-control product-select" data-search="true">
                  <option disabled selected>Select</option>
                </select>
              </div>
              <div class="row mt-3">
                <label class="labels" style="font-size: 16px">Product Name</label>
                <input type="text" class="form-control product-name">
              </div>
              <div class="row mt-3">
                <label class="labels" style="font-size: 16px">Sell Price</label>
                <input type="text" class="form-control sell-price">
              </div>
              <div class="row mt-3">
                <label class="labels">Amount</label>
                <input type="number" class="form-control amount">
              </div>
              <div class="mt-3 d-flex flex-column align-items-center text-center">
                <button class="btn btn-danger deleteItem" type="button">Delete</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    `);
    $('.productDiv').append(newDiv);
  });

  // 事件委托绑定删除按钮点击事件，适配动态生成的元素
  $('.productDiv').on('click', '.deleteItem', function() {
    $(this).closest('[class^="item-wrapper-"]').remove();
    resetItemNum();
  });

  // 序号重置工具方法
  function resetItemNum() {
    let currentCount = 0;
    $('.productDiv [class^="item-wrapper-"]').each(function() {
      currentCount++;
      $(this).find('.item-num').text(currentCount);
      $(this).removeClass().addClass(`item-wrapper-${currentCount}`);
    });
    divCount = currentCount;
  }
});

• 每点击一次「Add Product」按钮，生成的新div会自动按顺序展示对应编号
• 删除任意一个已生成的div后，剩余div的序号会自动重新排序保持连续
• 所有表单元素不存在id冲突，后续取值时通过类名选择即可正常获取对应值

内容的提问来源于stack exchange，提问作者Md. Ashiqur Rahaman Dipto