无法通过媒体库中的JS上传多个图像：Laravel 5.3

Question

I'm having problem uploading multiple images in JS.

issue in detail:- i have to select 3 different images and when i select First image it works perfect BUT when i select 2nd image it is selected in its place as well as in first image's place also. Here's the tricky part, when i select the 3rd image its Not selected in its place Instead it gets selected in above 2 fields.

please somebody help me, here's my code:

HTML:

<div class="form-group Item-outer">
    <label for="featured_image">Banner Image</label>
    <input class="form-control" type="hidden" name="featured_image" 
     value="{{$country->featured_image or null}}">
    @if($country->featured_image)
    {!! getImageById($country->featured_image,false,"img-responsive") !!}
    @else
    <img src='{{ null}}' class='img-responsive'>
    @endif

    <a href='#' class='upload-media btn btn-primary' data-toggle="modal"
     data-target="#uploadMedia">Select File</a>
    @if($errors->first('featured_image'))
    <p class='error'>{{$errors->first('featured_image')}}</p>
    @endif
  </div>




  <div class="form-group Item-outer">
    <label for="flag_image">Flag Image</label>
    <input class="form-control" type="hidden" name="flag_image"
    value="{{$country->flag_image or null}}">
    @if($country->flag_image)
    {!! getImageById($country->flag_image,false,"img-responsive") !!}
    @else
    <img src='{{ null}}' class='img-responsive'>
    @endif

    <a href='#' class='upload-media1 btn btn-primary' data-toggle="modal"
     data-target="#uploadMedia">Select File</a>
    @if($errors->first('flag_image'))
    <p class='error'>{{$errors->first('flag_image')}}</p>
    @endif
  </div>




  <div class="form-group Item-outer">
    <label for="thumb_image">Thumb Image</label>
    <input class="form-control" type="hidden" name="thumb_image"
     value="{{$country->thumb_image or null}}">
    @if($country->thumb_image)
    {!! getImageById($country->thumb_image,false,"img-responsive") !!}
    @else
    <img src='{{ null}}' class='img-responsive'>
    @endif

            <a href='#' class='upload-media2 btn btn-primary' data-toggle="modal" data-target="#uploadMedia">Select File</a>
            @if($errors->first('thumb_image'))
            <p class='error'>{{$errors->first('thumb_image')}}</p>
            @endif
        </div>

JS:

var imgField = null;

$(".upload-media").click(function () {
    imgField = $(this).prev().prev();
})

$("[data-target='#uploadMedia']").on('click', '.media-image', function () {
    console.log($(this));
    // console.log()
    $el = $(this);
    $(imgField).val($($el).data('image-id'));
    $(imgField).next().attr('src', $($el).data('img')).addClass('img-responsive');
    $('#uploadMedia').modal('toggle');
});



var imgField1 = null;

$(".upload-media1").click(function () {
    imgField1 = $(this).prev().prev();
})

$("[data-target='#uploadMedia']").on('click', '.media-image', function () {
    console.log($(this));
    $el = $(this);
    $(imgField1).val($($el).data('image-id'));
    $(imgField1).next().attr('src', $($el).data('img')).addClass('img-responsive');
    $('#uploadMedia').modal('toggle');
});




var imgField2 = null;

$(".upload-media2").click(function () {
    imgField2 = $(this).prev().prev();
})

$("[data-target='#uploadMedia']").on('click', '.media-image', function () {
    console.log($(this));
    $el = $(this);
    $(imgField2).val($($el).data('image-id'));
    $(imgField2).next().attr('src', $($el).data('img')).addClass('img-responsive');
    $('#uploadMedia').modal('toggle');
});

$(".media-image").click(function () {
    $('.modal-backdrop').removeClass();
});