I got the solution. Posting it in case it might help some one who has similar issue.
The reason was I am trying to configure the file upload plugin on the drop zone and specifying the file container to that. But it has to be done in a reverse way
Initialize fileupload plugin on the form which is the files container and specify dropzone to it.
I couldnt find a way to specify two drop zones for one initialization so I gave same class names to those two dropzones and specified the selector based on the class and that solved the issue.
Below is the final initialization which is working: dropZoneElementClassName is the same class name used for both li element and the actual form element.
$('form.fileupload').each(function() {
$(this).fileupload({
var dropZoneElement;
dropZoneElement = $(".dropZoneElementClassName");
filesContainer : $(this).find("tbody.files"),
dropZone : dropZoneElement
});
});