Link piece to square in puzzle

Question

I am making a Puzzle with jQuery and I use draggable and droppable. Yesterday i made my squares to drop my puzzle pieces in and I've tried to link a piece to a square by making ID the same or class but it doesn't works.

Does anyone know how I can link them so if I want to drop a piece on that square the square only accept the right piece?

I have 25 pieces and 25 squares to drop in, 5x5.

    $(document).ready(function() {
    $("button").button({icons: {
        primary: "ui-icon-gear"     }});
    $("img").draggable()            }); 

     $(function() {
   $( "#droppable" ).droppable({
    drop: function( event, ui ) {
    $( this )
      .addClass( "ui-state-highlight" )
      .find( "img" ) ; 
           }
});
});

HTML

<img id="puz1.1.1" class="puz1.1" src="images/1.1.1.png"/>
<img class="puz1.1" src="images/1.1.2.png"/>
<img class="puz1.1" src="images/1.1.3.png"/>
<img class="puz1.1" src="images/1.1.4.png"/>
<img class="puz1.1" src="images/1.1.5.png"/>



    <div id="droppable" data="puz1.1a" class="ui-widget-header">
  </div>

 <div id="container">
        <div id="Kader">
            <table border="0">
                <tbody>
                    <tr>

<td id="puzdrop1.1a" class= "droppable ui-droppable"></td>
<td id="puzdrop1.1b" class= "droppable ui-droppable"></td>
<td id="puzdrop1.1c" class= "droppable ui-droppable"></td>
<td id="puzdrop1.1d" class= "droppable ui-droppable"></td>
<td id="puzdrop1.1e" class= "droppable ui-droppable"></td>

            </tr>
               <tr>

<td id="puz1.1.6" class= "droppable ui-droppable"></td>
<td id="puz1.1.7" class= "droppable ui-droppable"></td>
<td id="puz1.1.8" class= "droppable ui-droppable"></td>
<td id="puz1.1.9" class= "droppable ui-droppable"></td>
<td id="puz1.1.10" class= "droppable ui-droppable"></td>

            </tr>
                <tr>

<td id="puz1.1.11" class= "droppable ui-droppable"></td>
<td id="puz1.1.12" class= "droppable ui-droppable"></td>
<td id="puz1.1.13" class= "droppable ui-droppable"></td>
<td id="puz1.1.14" class= "droppable ui-droppable"></td>
<td id="puz1.1.15" class= "droppable ui-droppable"></td>

            </tr>
                        <tr>

<td id="puz1.1.16" class= "droppable ui-droppable"></td>
<td id="puz1.1.17" class= "droppable ui-droppable"></td>
<td id="puz1.1.18" class= "droppable ui-droppable"></td>
<td id="puz1.1.19" class= "droppable ui-droppable"></td>
<td id="puz1.1.20" class= "droppable ui-droppable"></td>

            </tr>
                   <tr>

<td id="puz1.1.21" class= "droppable ui-droppable"></td>
<td id="puz1.1.22" class= "droppable ui-droppable"></td>
<td id="puz1.1.23" class= "droppable ui-droppable"></td>
<td id="puz1.1.24" class= "droppable ui-droppable"></td>
<td id="puz1.1.25" class= "droppable ui-droppable"></td>

            </tr>





        </tbody>
    </table>

</div>
</div>

</div>

    #droppable{
    width: 50px;
    height:50px;
    margin: 0;  
}

.droppable{
    width:50px;
    height: 50px;
    background-color: grey;
}

#kader table td {
    width:50px;
    height: 50px;
    background-color: grey;
    margin: 0;
    padding: 0;
}
#kader {
    width: 300px;
    height: 300px;
}
#kader table {
    width:270px;
    height: 270px;
    background-color: blue;
    border-collapse: collapse;
}

Answer 1

First: You can't have two or more elements with the same ID, an ID must be unique.

But you may have data attached to your puzzle pieces:

<img id="piece_01" .. />

<td id="place_01" data="piece_01" ... />

or just the other way round, attaching place ID to piece. Now you can pick up the data attribute and compare that to the dropped image ID etc.