Javascript Can'；t通过媒体库：Laravel 5.3中的JS上传多个图像

我在JS中上传多个图像时遇到问题

问题详情：- 我必须选择3个不同的图像，当我选择第一个图像时，它工作得非常完美，但当我选择第二个图像时，它被选择在其位置以及第一个图像的位置。这里有一个棘手的部分，当我选择3rd图像时，它的不是在位置被选中，而是在上面的两个字段中被选中

请有人帮帮我，这是我的密码：

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>

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();
});