WP Media Library - Select function not updating row index for ID update

I am working on a wordpress blog with a custom metabox on the edit page of each post.
This metabox consists of table with each row containing image src selected from media library.

Now every new row added has an id :
row 1 : img_metabox_src_0
row 2 : img_metabox_src_1
row 3 : img_metabox_src_2

Table headers goes like :

---

----Image < img >------ |------- URL (Input textbox)------ | -------- Select Image (Input submit)------ | -----Delete Image (Input submit)--------

---

Now, On click on "Select Image" on any row, I retrieve the row index from jquery, and then send : "img_metabox_src_"+index to file_frame.on( 'select', function() for url update.

i.e.

 jQuery('tr #select_image').off().on('click', function( event ){

event.preventDefault();


var row_index = jQuery(this).closest('tr').index();
var id = "img_metabox_src_" + row_index;

//******** 1 ***********
console.log('row_index');
console.log(row_index);

console.log(id);
console.log(jQuery('#' + id));


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


file_frame = wp.media.frames.file_frame = wp.media({
                                        title: "Select/Upload Image",
                                        button: {
                                                text: "Select",
                                                },
                                        library : { type : 'image'},
                                        multiple: false
                                       });


file_frame.on( 'select', function() {
                         attachment = file_frame.state().get('selection').first().toJSON();

                         // "mca_features_tray" is the ID of my text field that will receive the image
                         // I'm getting the ID rather than the URL:

                         // but you could get the URL instead by doing something like this:
                         //******** 2 ***********
                         console.log(id);
                         console.log(jQuery('#' + id));
                         jQuery('#' + id).attr('value',attachment.url);
                         id = null;
});

Now,

Case 1 : When I FIRST click with row index3, the URL updates on img_metabox_src_3.

Case 2 : But after that whichever row i click, the url updates on img_metabox_src_3.

Also on adding logs, I get

(for Case 2, say I clicked row index 1) :

//******** 1 ***********
row index : 1
id : img_metabox_src_1

//******** 2 ***********
id : img_metabox_src_3

i.e. inside file_frame.on( 'select', function() {,
the ID value changes to first clicked value.

Please help on how to pass updated row index/id to the select function

Thanks, I used global concept :

function set_row_index (ind){
row_index = ind;
}

function get_row_index(){
return row_index;
}

jQuery(document).ready(function(){

jQuery('tr input.select_media_library').off().on('click', function( event ){

event.preventDefault();
var index = jQuery(this).closest('tr').index();
**set_row_index(index);**
.
.
.

file_frame.on( 'select', function() {
                         attachment = file_frame.state().get('selection').first().toJSON();
                         **index = get_row_index();**
                         var id = "img_src_" + index;
                         jQuery('#' + id).attr('value',attachment.url);
                  });
file_frame.open();
});