Ideas for an issue involving html and css

Question

I’m developing an app where users can send photos that works like this:

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 be between the div container.

I made a small CSS so that when someone clicks on the image preview, the form corresponding to it will appear:

$('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 am using a appendTo so that when the user clicks on the preview, they throw the form in another div so that it looks beautiful.

But I can’t get the fomulario out of the div container due to a limitation of the app at the time of sending.

But if I don’t use the appendTo The view gets awful due to the form appearing right after each image playing everything else down. I would like visualization to appear as follows without having to take it out of the container (using appendTo it leaves and occurs above error):

Like she’d show up if I took the appendTo and the app works properly:

Does anyone have a solution idea for my form to appear this way without I need to remove it from container?