How to: JQuery multiple wordpress media uploader buttons in the same options page?

What’s happening at the moment is that you’re assigning the selected media item to all three inputs in the following line:

j('#preview-fav, #preview-grav, #preview-thumb').val(attachment.url);

In order to pass the value to only one of them, you need to change that line to respond to some kind of marker that’s been set in the buttons. In the example below I’ve set a data attribute in the button which is referenced in the javascript.

So assuming you have this html:

<!-- upload buttons -->
<input type="button" class="upload-button" data-target="input_1" value="Upload button 1" />
<input type="button" class="upload-button" data-target="input_2" value="Upload button 2" />
<input type="button" class="upload-button" data-target="input_3" value="Upload button 3" />

<!-- inputs to receive the value -->
<input type="text" id="input_1" value="" />
<input type="text" id="input_2" value="" />
<input type="text" id="input_3" value="" />

You can now do this in the js:

jQuery(function($) {

    $(document).ready(function () {

            var mediaUploader;

            // we can now use a single class name to reference all upload buttons
            $('.wp-admin').on('click', '.upload-button', function(e) {

                e.preventDefault();                

                // store the element that was clicked for use later
                trigger = $(this);

                if( mediaUploader ){
                    mediaUploader.open();
                    return;
                }

                mediaUploader = wp.media.frames.file_frame = wp.media({
                    title: 'Upload', 
                    button: {
                        text: 'Upload'
                    },
                    multiple: false
                });

                mediaUploader.on('select', function() {

                    attachment = mediaUploader.state().get('selection').first().toJSON();

                    // we're replacing this line:
                    //$('#preview-fav, #preview-grav, #preview-thumb').val(attachment.url);

                    // assign the value of attachment to an input based on the data-target value
                    // of the button that was clicked to launch the media browser
                    $('#' + trigger.data('target') ).val(attachment.url);

                    $('.favicon-preview, .gravatar-preview, .thumbnail-preview').css('background','url(' + attachment.url + ')');
                });

                mediaUploader.open();

            });            

    });

});

UPDATE

Based on the code you pasted, you can make it much more efficient like this:

function sweetlola_images(){

    $imgs = array(
        'gravatar'  => 'img_1',
        'thumbnail' => 'img_2',
    );

    foreach( $imgs as $name => $id ){

        // get the image
        $url = esc_attr( get_option( $name ) );

        // if there isn't one, set $gravatar as empty string
        $url = $url ? $url : '';

        //upload button
        echo '<input type="button" data-target="' . $id . '"  value="Upload" class="button button-secondary upload-button" />';

        //input text field
        echo '<input type="text" id="' . $id . '" name="' . $name . '" value="' . $url . '" />';

        if( empty( $url ) ){ //if the value is empty this will show a just the upload button
            echo '<input type="button" value="Remove" data-remove_target="' . $id . '" class="button button-secondary" />';
        }

        // note
        echo '<p><i>Idem.<br />Resolução: 89px X 89px</i></p>'; 

    }
}

Put your three image types in the $imgs array, and generate them all with a single function.