attr. ID only works once, despite different IDs

Question

This is my site: http://marmiteontoast.co.uk/fyp/login-register/register-username-builder.php

When you drag the tile from the right and drop it in the coloured box, it adds an ID to the droppable (try it for yourself and see).

This works fine for number 1. tile and box, but the rest of them... it does nothing. No ID added.

This is the code for the adding of the ID "droppedOne" which works fine:

$( ".slot.one" ).droppable({
  drop: function(event, ui) {
    ui.draggable.attr('id', 'droppedOne');
    $(".save.one").fadeIn("fast");
  }
});

Answer 1

Id's are unique for html elements

ui.draggable.attr('id', 'droppedOne');

will need to use a class instead, changing to:

ui.draggable.addClass("dropped");