仅将图片上传网址应用于特定输入字段

我正在WordPress的自定义元框中创建自定义字段。我有输入文本字段、文本区域和复选框，它们都工作正常。我还为正在运行的图像库提供了一个浏览按钮。

当您单击"浏览"按钮时，它会拉出WordPress媒体上传屏幕，当您选择该图像时，它将替换输入值（以及图像缩略图）。

这是WordPress元框设置的相关部分。

function show_custom_fields_meta_box() {
    global $post;  
    $meta = get_post_meta( $post->ID, 'custom_fields', true ); ?>
    <input type="hidden" name="custom_meta_box_nonce" value="<?php echo wp_create_nonce( basename(__FILE__) ); ?>">
    <!-- image upload field -->
    <p>
      <label for="custom_fields[image]">Image Upload</label><br>
      <input type="text" name="custom_fields[image]" id="custom_fields[image]" class="meta-image regular-text" value="<?php echo $meta['image']; ?>">
      <input type="button" class="button image-upload" value="Choose or Upload an Image">
      <div class="image-preview"><img src="<?php echo $meta['image']; ?>" style="max-width: 250px;"></div>
    </p>
 }

这是我用来打开WordPress媒体库并上传图像的jQuery。

<script>
    /*
     * Attaches the image uploader to the input field
     */
    jQuery(document).ready(function ($) {
        // Instantiates the variable that holds the media library frame.
        var meta_image_frame;
        // Runs when the image button is clicked.
        $('.image-upload').click(function (e) {
            // Prevents the default action from occuring.
            e.preventDefault();
            var selected = $(this);
            var meta_image = $('.meta-image');
            // If the frame already exists, re-open it.
            if (meta_image_frame) {
                meta_image_frame.open();
                return;
            }
            // Sets up the media library frame
            meta_image_frame = wp.media.frames.meta_image_frame = wp.media({
                title: meta_image.title,
                button: {
                    text: meta_image.button
                }
            });
            // Runs when an image is selected.
            meta_image_frame.on('select', function () {
                // Grabs the attachment selection and creates a JSON representation of the model.
                var media_attachment = meta_image_frame.state().get('selection').first().toJSON();
                // Sends the attachment URL to our custom image input field.
                $('.meta-image').val(media_attachment.url);
                var imgurl = $('.meta-image').val();
                $(selected).prev().val(imgurl);
                $(selected).closest('div').find('.image-preview').children('img').attr('src',imgurl);
            });
            // Opens the media library frame.
            meta_image_frame.open();
        });
    });
</script>

现在，这完全可以正常工作。input按钮具有.image-upload类，input文本字段具有meta-image类。

但是，如果我添加另一个字段...（ custom_fields[image2] ）

<p>
  <label for="custom_fields[image2]">Image Upload</label><br>
  <input type="text" name="custom_fields[image2]" id="custom_fields[image2]" class="meta-image regular-text" value="<?php echo $meta['image2']; ?>">
  <input type="button" class="button image-upload" value="Choose or Upload an Image">
  <div class="image-preview"><img src="<?php echo $meta['image2']; ?>" style="max-width: 250px;"></div>
</p>

jQuery将应用于浏览按钮和文本输入，因为它是一个类。我知道（认为）我必须使用某种形式的$(this)来获得正确的按钮和文本输入，但到目前为止，我所有的努力都是徒劳的。

我已经尝试过$(this).closest('.meta-image')，但这似乎不起作用。

谢谢！