More DIV-Boxes one Function - How to do

More DIV-Boxes one Function - How to do

Hello! I'm starting with JQueryUI, but i have a Little understanding Problem how the draggable-function works with more div's...

I have this Code, and it will work well for Box1, but not for Box2. How i can define the function so it will work also for Box2 ?

  1.   <script>
    $( function() {
      
         $( "#box1" ).draggable({ containment: "parent", scroll: false, snap: true, snapTolerance: 5});
         $( "#box1" ).resizable();
         $( "#box1" ).mousemove(function(){
           var coord = $(this).position();
      }).mouseup(function(){
           var coords=[];
           var coord = $(this).position();
         var item={ id: 1, coordTop:  coord.left, coordLeft: coord.top };
           coords.push(item);
           var order = { coords: coords };
           $.post('updatecoords.php', 'data='+JSON.stringify(order), function(response){
            if(response=="success")
               $("span.alert").html('Coordinates saved!').hide().fadeIn(1000);setTimeout(function(){ $('span.alert').fadeOut(1000); }, 2000);
           });
         });
      }            
                
    });
  2. </script>
  3. </head>
  4. <body>
  5. <div id="grid" class="ui-widget-content">
      <div id="box1" class="ui-widget-content">
        <h3 class="ui-widget-header">Box 1</h3>
      </div>
      <div id="box2" class="ui-widget-content">
        <h3 class="ui-widget-header">Box 2</h3>
      </div>
    </div>
    <div id="respond">Position: <span class="position"></span> Size: <span class="size"></span> <span class="alert"></span></div>
  6. </Body>