Как выделить единственный div, куда файл перетаскивается?

Question

У меня есть форма с input type="file" и всего там 3 inputs. поэтому по запросу клиента я делаю некоторые изменения в дизайне и скрываю стиль по умолчанию на input type="file" и преобразую его в стиль drag and drop . теперь проблема в том, что когда я перетаскиваю файл в разделе input, мне нужно выделить тот div, где файл перетянул , потому что у меня есть 4 ввода, он выделяет только последний скрипт, для которого я написал выделение div

HMTL

    <div class="col-sm-4">
                                    <label for="exampleInputFile">File Before</label>
                                    <div class="file-drop-area border">

                                        <input type="file" id="exampleInputFile" class="file_before files" name="file_before[]" multiple required>
                                        <p class="message" name="drag">Drag your files here or click in this area.</p>
                                    </div>
                                    <div class="file_before_append"></div>
                            </div>

                            <div class="col-sm-4">
                                <div class="form-group">
                                <label for="exampleInputFile">File After</label>
                                <div class="file_after-drop-area border">
                                    <input  type="file" id="exampleInputFile" class="file_after files" name="file_after[]" multiple required>
                                    <p class="message">Drag your files here or click in this area.</p>
                                </div>
                                <div class="file_after_append"></div>
                            </div>

SCRIPT

 <script>

        var $fileInput = $('.file_after');
        var $droparea = $('.file_after-drop-area');

        $fileInput.on('dragenter focus click', function () {
            $droparea.addClass('is-active');

        });

        $fileInput.on('dragleave blur drop', function () {
            $droparea.removeClass('is-active');
        });

</script>

<script>

        var $fileInput = $('.file_before');
        var $droparea = $('.file-drop-area');

        $fileInput.on('dragenter focus click', function () {
            $droparea.addClass('is-active');

        });

        $fileInput.on('dragleave blur drop', function () {
            $droparea.removeClass('is-active');
        });

</script>
Runs only the 2nd script you can say it runs the last script 

CSS

     form input.files{
            position: absolute;
            margin: 0;
            padding: 0;
            width: 100%;
            opacity: 0;
        }
        .border{
            border: 2px dashed #d2d6de;
            height: 40px;
        }
        form .message{
             width: 100%;
             height: 100%;
             text-align: center;
             line-height: 35px;
             overflow: hidden;
             color: #d2d6de;
         }
        label.col-sm-10 {
            padding-left: initial;
        }
        .file-drop-area {
            position: relative;
            display: flex;
            width: 450px;
            max-width: 100%;
            transition: 0.2s;
        }
        .file-drop-area.border.is-active {
            border: 2px dashed black;
        }
        .file_after-drop-area {
            position: relative;
            display: flex;
            width: 450px;
            max-width: 100%;
            transition: 0.2s;
        }
        .file_after-drop-area.border.is-active {
            border: 2px dashed black;
        }

Теперь я хочу выделить div, где я наведите курсор на файл перетаскивания jsfiddle link

Answer 1

Здесь нельзя использовать одну и ту же переменную для разных методов. Используя var fileinput.

Check out скрипта, которую я скопировал и изменил