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

Question

我在使用JS上传多个图片时遇到问题。

详细问题： - 我必须选择 3个不同的图像，当我选择第一个图像时，它会完美但是当我选择第二个图像时，它会在其位置选择<强大>以及第一个图像的位置也。这是一个棘手的部分，当我选择第三图像时，其不选择而不是，它会在上面的2个字段中被选中< /强>

请有人帮助我，这是我的代码：

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