Drag and Drop using jquery and php

Question

I can easily drag and drop images in first div. But the second div inside response, when I am dropping images It doesn't works. Could you please help me to findout this issue?

Load grid is the response code. Drop image is for drag and drop script.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="drop-area"><h3 class="drop-text">Drag and Drop Images Here</h3></div>

    <!-- Load Grid  Begin -->
        $(document).ready(function(){
            var deleteID;
            $.ajax({
                type: "POST",
                url: "insert.php",
                dataType: 'json',
                data: {gridload: 'loadingposition'},
                success: function (response) {
                   for (var i in response)
                    {
                        var obj = jQuery.parseJSON( response[i].position );
                        var id  = response[i].id;
                        deleteID = response[i].id;
                        var grid = $('.grid-stack').data('gridstack');
                        grid.add_widget($('<div><div class="grid-stack-item-content" id="divAllTextBox_'+id+'" data-custom-id="'+id+'"><form id="addForm_'+id+'" method="post"><div class="form-group"><label for="column">Image</label><div id="drop-area"><h3 class="drop-text">Drag and Drop Images Here</h3></div></div><button class="btn btn-default" id='+id+' onclick="saveData('+response[i].id+'); return false;">Submit</button></form></div><div/>'),obj.x, obj.y, obj.width, obj.height, true);
                   }
                }
            });
        });
        <!-- Load Grid End -->

<!-- Drop Image Begin -->
        $(document).ready(function() {
            $("#drop-area").on('dragenter', function (e){
                e.preventDefault();
                $(this).css('background', '#BBD5B8');
            });

            $("#drop-area").on('dragover', function (e){
                e.preventDefault();
            });

            $("#drop-area").on('drop', function (e){
                $(this).css('background', '#D8F9D3');
                e.preventDefault();
                var image = e.originalEvent.dataTransfer.files;
                createFormData(image);
            });
        });

        function createFormData(image) {
            var formImage = new FormData();
            formImage.append('userImage', image[0]);
            uploadFormData(formImage);
        }

        function uploadFormData(formData) {
            $.ajax({
                url: "upload.php",
                type: "POST",
                data: formData,
                contentType:false,
                cache: false,
                processData: false,
                success: function(data){
                    $('#drop-area').append(data);
                }
            });
        }
        <!-- Drop image End -->

Answer 1

An ID is unique.

for (var i in response)
{
    //add elements with #drop-area here
}

$("#drop-area").on('drop', function (e){
    //do stuff with the first matched element #drop-area
});

You select the elements using IDs, where an ID by definition is unique to your document. Therefore jQuery will only apply the given functionality to the first element it finds. Changing the ID to a class will most likely solve your problem.

$(".drop-area").on('drop', function (e){
    //do stuff only with all elements .drop-area
});