Drag, Drop and Clone Image with dynamic ID

[nadiam]

Hello, im trying to create a page that drag, drop and clone image on the drop plus dynamically add ids to the clones images. i sort of have it except the dynamic id part im not doing it right.

$(document).ready(function(){

    var cinemascreen = $("#cinema-screen");
    var cinema = $("#cinema-wrapper"); 
    var single = $(".single-chair");
    var twin = $(".twin-chair");
    var four = $(".four-chair");

    cinemascreen.draggable({ 
        containment: cinema, scroll: false 
    });

    single_chair = 0

    $(".single-chair").draggable({ 
        helper: "clone"
    });

    $("#cinema-wrapper").droppable({
        accept: ".single-chair",
        drop: function(event, ui) {
            $(this).append($(ui.draggable).clone());
            var single_chair_id = "A" + single_chair;
            $("#cinema-wrapper .single-chair").attr('id', single_chair_id);
            $(single_chair_id).draggable({
                containment: 'parent',
            });
            single_chair ++;
        }
    });
});

page is like this:

the blue squares next to the screen do have the id but all have the same id. first dropped image will have A1 then when the second one both images have id A2 etc

TIA for any help