Wordpress wp.media上传图片

Question

I am trying create my own wordpress widget. I want upload 2 image using selecting from media.

I create 2 input area and 2 buttons. I select image. But 2 input values change together. For open "wp.media" used jQuery code. There is my code. Where is my error ? Can you help me ?

////Form
public function form( $instance ) {

$firstimage = ! empty( $instance['firstimage'] ) ? $instance['firstimage'] : '';

$secondimage = ! empty( $instance['secondimage'] ) ? $instance['secondimage'] : '';


<input class="widefat image-upload" id="<?php echo esc_attr( $this->get_field_id( 'firstimage' ) ); ?>"name="<?php echo esc_attr( $this->get_field_name( 'firstimage' ) ); ?>" type="text" value="<?php echo esc_url( $firstimage ); ?>">
<button type="button" class="button button-primary js-image-upload">Select</button>




<input class="widefat image-upload2" id="<?php echo esc_attr( $this->get_field_id( 'secondimage' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'secondimage' ) ); ?>" type="text" value="<?php echo esc_url( $secondimage ); ?>">
<button type="button" class="button button-primary js-image-upload">Select</button>

<?php 
}


////Update

   public function update( $new_instance, $old_instance ) {
       $instance = array();
       $instance['firstteam'] = ( ! empty( $new_instance['firstteam'] ) ) ? sanitize_text_field( $new_instance['firstteam'] ) : '';
       $instance['firstimage'] = ( ! empty( $new_instance['firstimage'] ) ) ? sanitize_text_field( $new_instance['firstimage'] ) : '';
       $instance['secondteam'] = ( ! empty( $new_instance['secondteam'] ) ) ? sanitize_text_field( $new_instance['secondteam'] ) : '';
       $instance['secondimage'] = ( ! empty( $new_instance['secondimage'] ) ) ? sanitize_text_field( $new_instance['secondimage'] ) : '';

       return $instance;
   }




/////There is my jQuery code:




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

$(document).on('click', '.js-image-upload', function(e){
   e.preventDefault();
   var $button = $(this);
   var file_frame = wp.media.frames.file_frame= wp.media({
       title: 'Klub logotipini tanlang yoki yuklang',
       library:{
           type: 'image',

       },
       button:{
           text: 'Logotipni tanlash'
       },
       multiple: false
   });

   file_frame.on('select', function(){
       var attachment = file_frame.state().get('selection').first().toJSON();
       $button.siblings().val(attachment.url);
       $("input").trigger("input");
   });
   file_frame.open();
});

});

Answer 1

the click event you are handling is on the class '.js-image-upload'. the class name is same for both the buttons. I think this is causing the issue.