title: Looping a .mouseup with javascript
body: <p>Kind of feels like I am spamming questions by now, but w/e, I was just wondering if there is any way to loop a <code>.mouseup</code> function? </p>
  
  <p>In my code:</p>
  
  <pre><code>$(document).ready(function() {
      var antal = document.getElementsByClassName("e");
      for (var i = 1; i &lt;= antal.length; i++) {
          $("#e" + i).draggable({ 
              containment: '#glassbox', 
              scroll: false
          });
      }
      .mouseup(function(){ 
          var coords = [];
          var coord = $(this).position();
          var item = {
              coordTop: coord.left,
              coordLeft: coord.top
          };
          coords.push(item);
          var order = { coords: coords, id: 1 };
          $.post('updatecoords.php', 'data='+$.toJSON(order), function(response){
              if(response == "success") {
                  $("#respond")
                     .html('&lt;div class="success"&gt;X and Y Coordinates Saved!&lt;/div&gt;')
                     .hide()
                     .fadeIn(1000);
                  setTimeout(function() {
                      $('#respond').fadeOut(1000);
                  }, 2000);
              }
          });
      });
  });
  </code></pre>
  
  <p>the first part works without a problem and just the way I want it, all the looped divs are draggable and I can move them inside the glassbox div which is exactly what I want. The .mouseup function however, does not work and makes the boxes undraggable, and I was just wondering if there is a way I could do it like this or if I should just give up.</p>
  
  <p>EDIT:</p>
  
  <p>This is the PHP/HTML code I am using on the site which is connected to the javascript:</p>
  
  <pre><code>$antal = $mysqli-&gt;query("SELECT `Grupp ID` FROM `Elevgrupper` WHERE `Grupp ID`=25");
  $num = $antal-&gt;num_rows;
  
  $res = $mysqli-&gt;query("SELECT `Namn`, `Efternamn` FROM `Elever` WHERE `ID` IN (SELECT `Användar ID` FROM `Elevgrupper` WHERE `Grupp ID` = 25)");
  
  for ($i = 1; $i&lt;=$num; $i++){
      $get_coords = mysqli_query($mysqli, "SELECT * FROM coords WHERE id = '" . $i . "'");
      $row = $get_coords-&gt;fetch_assoc();
      $ok = $res-&gt;data_seek($i-1);
      $row1 = $res-&gt;fetch_assoc();
  
      //
      $x = $row['x_pos'];
      $y = $row['y_pos']; 
      echo '&lt;div id="e'. $i .'" class="e" style="left:'.$x.'px; top:'.$y.'px;"&gt;&lt;p class="p'. $i .'" id="p' . $i .'"&gt;'. $row1["Namn"] . " " . $row1["Efternamn"] . '&lt;/p&gt;&lt;/div&gt;';
      }
  </code></pre>
  
  <p>Edit #2:</p>
  
  <p>This is a working version of the program without the use of a loop:</p>
  
  <pre><code>    $(document).ready(function() {
  
      $("#e1").draggable({ 
              containment: '#glassbox', 
              scroll: false
       })     
  
  
  
      .mousemove(function(){
                      var coord = $(this).position();
                      $("p:last").text( "left: " + coord.left + ", top: " + coord.top );
       })
  
      .mouseup(function(){ 
              var coords=[];
              var coord = $(this).position();
              var item={ coordTop:  coord.left, coordLeft: coord.top  };
              coords.push(item);
              var order = { coords: coords, id: 1 };
              $.post('updatecoords.php', 'data='+$.toJSON(order), function(response){
                      if(response == "success") {
                          $("#respond").html('&lt;div class="success"&gt;X and Y Coordinates Saved!&lt;/div&gt;').hide().fadeIn(1000);
                          setTimeout(function(){ $('#respond').fadeOut(1000); }, 2000);
                      }
              });
  
      });
  </code></pre>
  
  <p>Edit #3:
  Just remembered that this might also be vital information:</p>
  
  <p>type="text/javascript" src="js/jquery-1.3.2.min.js"></p>
  
  <p>type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></p>
  
  <p>type="text/javascript" src="js/jquery.json-2.2.min.js"></p>
  
  <p>These are the links I use.</p>