WP Media uploader loading only once in options page

A weird issue happening with me which I am unable to fix. In my theme options page, I added options to upload images one for logo and another for backgroud image. Here is my HTML

 <table class="form-table">
            <tr>
              <th scope="row"><?php _e('Logo Image'); ?></th>
              <td><label for="logo_link">
                  <input id="image-url" type="text" name="logo_link" value="<?php echo get_option('logo_link'); ?>" size="50" />
                    <input id="upload-button" class="button" type="button" value="Upload Image" />
                 </label>
             </td>
            </tr>
           <tr>
              <th scope="row"><?php _e('BG Image'); ?></th>
              <td><label for="bg_image">
                  <input id="image-url" type="text" name="bg_image" value="<?php echo get_option('bg_image'); ?>" size="50" />
                    <input id="upload-button" class="button" type="button" value="Upload Image" />
                 </label>
             </td>
            </tr>
            </table>

This how I enqueued the JS

function media_uploader_enqueue()
{
    wp_enqueue_media();
    wp_register_script('image-upload-js', get_stylesheet_directory_uri(). '/js/image-upload-js.js', true, '1.0.1');
    wp_enqueue_script('image-upload-js');
}
add_action('admin_enqueue_scripts', 'media_uploader_enqueue');

This is what I put in the image-upload-js.js file

jQuery(document).ready(function($){

  var mediaUploader;

  $('#upload-button').click(function(e) {
    e.preventDefault();

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

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


    mediaUploader.on('select', function() {
      attachment = mediaUploader.state().get('selection').first().toJSON();
      $('#image-url').val(attachment.url);
    });

    mediaUploader.open();
  });

});

The annoying problem

The media uploader is opening for Logo Image field but not for the BG Image. I can also save options and all is set. If I put the URL manually in the BG image text field, it’s file. Just the media uploader is not working for this. If I shift the HTML block, the uploader only opens for the first block only. Any reason why this is happening. Thanks

The reason for the media uploader not opening when clicking the second button is that both of your buttons have the same ID, which you are also binding to the function that open your uploader. Element IDs should always be unique, hence the .click function listener will only detect when user clicks the first button (=first one with id=”image-url”). To solve this problem, try assigning a common class for both buttons, and bind the media uploader function to that class.

You will run in the same problem upon selecting the image for your BG Image, as both your outer inputs have also same ID (“image-url”), meaning the BG image will be assigned to Logo image. To get around this problem, you could use jQuery tree traversing functions to get the parent of your current input button and call the .val(attachment.url) on that element.