JQuery弹窗仅对首个元素生效，如何实现动态适配多行数据？

这个问题的核心原因很直白：页面里的ID必须是唯一的，你现在所有按钮都用了id="show"，jQuery绑定事件时只会识别第一个匹配该ID的元素，后面的按钮自然就没反应了。下面是完整的修复方案，还顺便帮你补上了「提交时明确对应哪个商品出价」的关键逻辑：

步骤1：调整按钮的标识规则 #

把按钮的id="show"改成class="show-bid-btn"（class允许重复使用），同时给每个按钮加一个自定义属性data-item-id，用来存储对应商品的唯一ID（值从你的MySQL数据里取，比如商品表的主键）：

<!-- 示例，每行按钮都按这个格式写，data-item-id替换为实际商品ID -->
<td><button class="show-bid-btn" data-item-id="1"><img src="pictures/bidIcon.png" width="30" height="30"></button></td>
<td><button class="show-bid-btn" data-item-id="2"><img src="pictures/bidIcon.png" width="30" height="30"></button></td>
<!-- ... 其他行以此类推 -->

步骤2：优化弹窗表单，添加商品ID存储字段 #

在弹窗的表单里新增一个隐藏输入框，用来临时存储当前要出价的商品ID，这样提交到bid.php时就能精准对应到商品：

<div id="popup" style="display: none;">
  <div class="overlay"></div>
  <div class="content">
    <header>
      <div id="close">✖</div>
    </header>
    <form name="form1" method="post" action="bid.php">
      <fieldset>
        <!-- 新增隐藏字段，存储当前商品ID -->
        <input type="hidden" name="item_id" id="item_id">
        <label for="bid">Bid</label>
        <!-- 修正原有的name和id命名，避免数组语法造成混淆 -->
        <input type="text" name="bid" id="bid" size="8"/>
        <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
      </fieldset>
      <footer>
        <button type="button" id="submit">Bid Now</button>
      </footer>
    </form>
  </div>
</div>

步骤3：修改jQuery代码，用事件委托实现全局绑定 #

因为你的表格是从MySQL动态加载的，推荐用事件委托绑定点击事件——不管是页面初始化时就存在的按钮，还是后续动态生成的按钮，都能正常触发弹窗：

$(document).ready(function(){
  // 事件委托：绑定到document，监听所有.show-bid-btn的点击
  $(document).on('click', '.show-bid-btn', function() {
    // 获取当前按钮对应的商品ID
    const itemId = $(this).data('item-id');
    // 把商品ID赋值给弹窗里的隐藏字段
    $('#item_id').val(itemId);
    // 显示弹窗
    $("#popup").show();
  });

  // 关闭弹窗的逻辑，同时清空输入框避免残留内容
  $("#close, #submit, .overlay").click(function() {
    $("#popup").hide();
    $('#bid').val('');
  });
});

改动说明 #

• 类选择器替代ID：class支持重复使用，完美适配多行按钮的场景。
• 事件委托：通过将事件绑定到父级容器（这里用document，你也可以绑定到表格的直接父元素，性能更优），解决动态生成元素无法绑定事件的问题。
• data属性传递信息：用data-item-id存储商品ID，能在弹窗中快速关联当前操作的商品，后端bid.php可以通过$_POST['item_id']和$_POST['bid']获取对应数据，完成出价逻辑。

这样修改后，所有行的按钮点击都会正常弹出弹窗，提交时也能准确对应到目标商品了。

内容的提问来源于stack exchange，提问作者saysmus