Get value from multiple elements dynamically created, (editable, drag and drop)

I am using Jquery to drag, drop and edit some content. I use a very nice Jquery codepen (https://codepen.io/social_quotient/pen/xxXxZq)

For my personal need, I want to be able to send all created content with php. It has to be in the exact order I dropped and dragged the content. So I thing the best idea is to group all content dynamically (when individually submitted) into a div or an input for example but I got struggles with content dynamically generated and once I got it dragged, it’s not working anymore.

So I started by something like this:

$("button#submit_titre").click(function(event) {
    var bla = $('input#titre').val();
    $('input#post_title').val(bla);
});

So when I click on the confirm button of the first content, it goes to a defined input. I could do that for all generated content but I don’t know how to give a specific ID in order to make it work.

So is there somebody who could give me some tips to where to go because I think I’m not going to the right direction