Ideas for a question involving html and css [closed]

I'm developing an app where users can send photos that works as follows:

The app

When a user chooses multiple photos through a loop, a form is generated for each photo to fill in the title and description.

The code

<div class="container">
 <div class="col-md-3"><span class="preview">Um preview da imagem enviada aqui</div></div>
 <div class="col-md-12>Aqui irá o formulário referente a foto</div>
</div>
<div class="form">
</div>

The above code is generated through javascript and MUST stay between% d and% d.

I made a small CSS so that when someone clicks on the preview of the image, the corresponding form appears:

$('body').on('click', '.preview', function(){
    $('.hideform').hide();
    var data = $(this).attr('data-ref');
    myDiv = $('div[data-ref="' + data + '"]');
    myDiv.appendTo('.form).show();
});

The problem

The problem is what I said above. I'm using a container so when the user clicks the preview, it throws the form into another div so it looks beautiful.

But I can not get the form from within the div appendTo because of an application limitation at the time of submission.

But if I do not use container the view looks horrible because the form appears right after each image and throws everything else down. I would like visualization to appear as follows without having to remove it from appendTo (using appendTo it exits and the above error occurs):

HowdoesitappearifIremovecontainerandtheappworkscorrectly:

Does anyone have a solution idea for my form to appear this way without having to remove it from appendTo ?