Javascript 在Wordpress中提交表单之前，为多个输入重命名类

我们正在WoodCommerce中使用Wordpress。我正在修改产品附加模块扩展。我需要能够为每个附加项添加图像。我正在调用媒体上传表单，在那里我可以为产品添加或选择图像。当我选择我的图像时，媒体上传表单将消失，图像的URL将写入一个隐藏的表单字段。但是，由于我在页面上有多个相同输入字段的实例（对于每种类型的加载项），所以URL只保存到输入字段的第一个实例。javascript根据ID将URL写入字段。但在许多情况下，没有为附加项分配唯一的ID，因为它们只是第一次添加

例如，假设我们正在出售一张桌子。在“木材选项”下，您可能有： Pine |（隐藏字段）|图像上载按钮 胡桃木|（隐藏字段）|图像上传按钮 灰烬|（隐藏字段）|图像上传按钮 等等

然后可能会有一个部分来选择你的椅子，或者如果桌子有叶子或没有

我需要找到一种方法，使用jQuery动态更改ID名称或类名，以便将上传的图像绑定到正确的隐藏输入字段。事实上，我几天前就把它弄坏了。我记不起我做了什么，也找不到任何在线提示来指引我正确的方向

下面是我调用媒体上传框的javascript（感谢Mike Jolly和其他人）：

以下是我的表单字段：

<td class="image_column"><?php echo esc_attr( $option['image']) ?><input type="text" class="add-on-image" value="<?php echo esc_attr( $option['image']); ?>" name='product_addon_option_image[<?php echo $loop; ?>][]' id='product_addon_option_image-' style='width:200px' />
   <a href="#" class="upload_image_button <?php if ( $image_id > 0 ) echo 'remove'; ?>">
        <img src="<?php if ( ! empty( $option['image'] ) ) echo esc_attr($option['image']); else echo esc_attr( woocommerce_placeholder_img_src() ); ?>" step="any" id='_btn' type='button' style="width:100px;" /></a>
    <span class="overlay"></span>
</td>

---

谢谢你的编辑，Skatox。对于将来发现这个的人，我解决了自己的问题。我确保图像和输入都有一个附加图像类。然后我使用了这个jquery脚本：
jquery（document）.ready（function（）{var I=1；jquery（'.add-on-image'）.each（function（）{jquery（this）.attr（“id”，“product_-addon_-option_-image-”）；I++}）
<td class="image_column"><?php echo esc_attr( $option['image']) ?><input type="text" class="add-on-image" value="<?php echo esc_attr( $option['image']); ?>" name='product_addon_option_image[<?php echo $loop; ?>][]' id='product_addon_option_image-' style='width:200px' />
   <a href="#" class="upload_image_button <?php if ( $image_id > 0 ) echo 'remove'; ?>">
        <img src="<?php if ( ! empty( $option['image'] ) ) echo esc_attr($option['image']); else echo esc_attr( woocommerce_placeholder_img_src() ); ?>" step="any" id='_btn' type='button' style="width:100px;" /></a>
    <span class="overlay"></span>
</td>