Rename Class for Multiple Inputs Before Submitting Form in WordPress

We are using WordPress with WooCommerce. I’m modifying the Products Add-On extension. I need to be able to add images for each of the add-on items. I’m calling the Media Upload form, where I can add or select an image for the product. When I choose my image, the Media Upload form goes away and the URL for the image is to be written to a hidden form field. However, since I have several instances of the same input field (for each type of add-on) on the page, the URL only gets saved to the first instance of the input field. The javascript writes the URL to the field based on ID. But there is no unique ID assigned to the add-on items yet in many cases, because they’re just being added for the first time.

For instance, imagine we’re selling a table. Under Wood Options, you might have:
Pine | (hidden field) | Image upload button
Walnut | (hidden field) | Image upload button
Ash | (hidden field) | Image upload button
etc.

Then there might be a section to choose your chairs, or if the table has a leaf or not.

I need to find a way to either dynamically change the ID name or class name with jQuery, so I can tie the image being uploaded to the correct hidden input field. I actually had this working a couple of days ago, but somehow broke it. And I can’t remember what I did and I can’t seem to find any online hints to point me in the right direction.

Here is my javascript to call the Media Upload box (thanks to Mike Jolly and others):

jQuery(document).ready(function() {
jQuery('.upload_image_button').on('click', function (event) {

    var file_frame;

    formfield = jQuery(this).prev().attr('id'); // Needed for the script to send the URL to the appropriate text box
    event.preventDefault();

    // Reopen media frame if it already exists.
    if ( file_frame ) {
            file_frame.open();
            return;
    }

    // Create media frame.
    file_frame = wp.media.frames.file_frame = wp.media({
            title: 'Add an Image',
                    button: {
                          text: 'Choose Image'
            },
            multiple: false  // Set to true to allow multiple files to be selected
    });

    // Callback on image select.
    file_frame.on( 'select', function() {
            attachment = file_frame.state().get('selection').first().toJSON();
            jQuery('#'+formfield).val(attachment.url);
    });

file_frame.open();
});
});

Here are my form fields:

<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>

I have properly enqueued the script and made sure the jquery and script were being called properly. But it’s not working.

Unfortunately, since this is on the admin side of the site, it’s not publically available for viewing.

Is there a way to rewrite these IDs or class names to be unique before I submit the product page details to the database?