javascript – How to use WordPress Media Upload on multiple buttons?

Question:

Here's the HTML code for the button and text field:

<div class="meta-container">
        <div class="label col-2 left">
            <label class="squeeze-label">Imagem Logo:</label>
        </div>
        <div class="col-6">
            <input class="definir_imagem_url" type="text" size="36" name="super-squeeze-meta[imagemLogo]" value="<?php echo $this->data['imagemLogo']; ?>" />
            <input class="definir_imagem_button button" type="button" value="Definir Imagem" />
            <a id="remover_imagem_logo" class="button remove-bg"><div class="dashicons dashicons-post-trash"></div>Remover Imagem</a>
            <p class="description">Imagem que ficará acima da headline.</p>
        </div>
    </div>

    <div class="meta-container">
        <div class="label col-2 left">
            <label class="squeeze-label">Imagem Background:</label>
        </div>
        <div class="col-6">
            <input class="definir_imagem_url" type="text" size="36" name="super-squeeze-meta[imagemBackground]" value="<?php echo $this->data['imagemBackground']; ?>" />
            <input class="definir_imagem_button button" type="button" value="Definir Imagem" />
            <a id="remover_imagem_background" class="button remove-bg"><div class="dashicons dashicons-post-trash"></div>Remover Imagem</a>
            <p class="description">Imagem que ficará no fundo da página. Por padrão será feito upload de uma nova imagem para o WordPress, caso necessite será possível informar um link externo.</p>
        </div>
    </div>

And the following javascript to make clicking on the "set_image_button" class button open the native WordPress media uploader and when inserting the selected image, put the image URL in the "set_image_url" class text field:

$('.definir_imagem_button').click(function(e) 
{
    e.preventDefault();

    var custom_uploader = wp.media({
        title: 'Selecionar Imagem',
        button: {
            text: 'Definir Imagem'
        },
        multiple: false  // Set this to true to allow multiple files to be selected
    })

    .on('select', function() 
    {
        var attachment = custom_uploader.state().get('selection').first().toJSON();
        $('.definir_imagem_url').val(attachment.url);
    })

    .open();

});

Doubt/Problem:

As I have multiple buttons and text field to upload images and insert the image URL in its respective text field, I used it as a class, because before that I needed to recreate the javascript code for each upload button, using ID instead of class. Using class is more organized and I don't need to rewrite the javascript code every time I add a new image upload/upload field.

The problem is that in this case when selecting and uploading the image and defining it, the URL(attachment.url) is passed to all fields with the class "define_image_url". Obviously I could use an ID instead of a class, but I want this to be done dynamically, without having to keep adding an ID every time I create a new image upload field.

In this case, how to make the URL(attachment.url) be added to the respective text field, defined by the class "define_image_url" and not for everyone that has this same class defined?

Answer:

Using the event.currentTarget you can find out which button was clicked and apply the attachment.url to the previous element:

$('.definir_imagem_button').click(function(e) {
    e.preventDefault();
    var target = e.currentTarget; // <---- referencia
    var custom_uploader = wp.media({
        title: 'Selecionar Imagem',
        button: { text: 'Definir Imagem' },
        multiple: false 
    })
    .on('select', function() {
        var attachment = custom_uploader.state().get('selection').first().toJSON();
        $(target).prev().val(attachment.url); // <--- usar referencia
    })
    .open();
});