How to use Wordpress Media Upload on multiple buttons?

Question

Follow the HTML code of 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 that by clicking on the class button "definir_imagem_button" open the native Wordpress media Uploader and by inserting the selected image, place the image URL in the class text field "definir_imagem_url":

$('.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 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 setting it, the URL(Attachment.url) is passed to all fields with the "definir_imagem_url" class. Obviously you could use an ID instead of a class, but I want it to be done dynamically, without adding ID every time you create a new image upload field.

In this case, how to make the URL(Attachment.url) to be added to the respective text field, defined by the class "definir_imagem_url" and not for all who have the same class defined?

Answer 1

Using the event.currentTarget you can tell 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();
});

Answer 2

In addition to the option mentioned by brasofilo, another option:

    $('.definir_imagem_button').on('click',function(e) {
    e.preventDefault();
    var $var_btm= $(this); // <---- 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();
        $var_btm.prev().val(attachment.url); // <--- usar referencia
    })
    .open();
});