What is best practice to call wordpress media uploader (wp.media)
<p>I have more than 5 tabs in a metabox. In every metabox i have a bootstrap modal for image variations holding some inputs and a button with class of <code>.btn.select_media_</code> and a data-id attribute which holding unique ID of that tab. I am opening wp uploader on click of this button. please see my JS code.</p>

<pre><code>var mediaUploader;
$(document).on('click','.btn.select_media_',function(e){
    e.preventDefault();
    var id=$(this).data('id');
    // If the uploader object has already been created, reopen the dialog
    console.log('clicked:'+id);
    if (mediaUploader) {
      mediaUploader.open();
      return;
    }
    // Extend the wp.media object
    mediaUploader = wp.media.frames.file_frame = wp.media({
    ///mediaUploader = wp.media.frames.mediaUploader = wp.media({
      title: 'Choose Image',
      button: {
      text: 'Choose Image'
    }, multiple: false });

    mediaUploader.on('select', function() {
      attachment = mediaUploader.state().get('selection').first().toJSON();
      $('#img_url_'+ id).val(attachment.url);
      $('#img_width_'+ id).val(attachment.width+'px');
      $('#img_title_'+ id).val(attachment.title);
      $('#show_img_'+ id).attr('src',attachment.url);
      console.log('selected'+ id);
    });
    // Open the uploader dialog
    mediaUploader.open();
});
</code></pre>

<p>Problem is that when i set/upload an image in any one tab this function run and set value of images in <code>mideaUploader.on('select')</code> event. when i am try to select image in an other tab i noticed in console that <code>console.log('selected'+ id);</code> had old value (on which tab i set first time) and <code>console.log('clicked'+ id);</code> had newer id value.</p>

<p>Please help!, what is wrong with my code? and how can i get same value at top and bottom of this handler?</p>