title: jquery droppable: class.each cycles once more than the number of classed elements
body: <p>Refer to <a href="https://jsfiddle.net/af8tv9bL/11/" rel="nofollow">jsfiddle</a></p>
  
  <p>I am using jQuery to move items between elements. Once the item is dropped onto the new element, I want to pull out the text of the item (it's inside a <code>&lt;div&gt;</code>).</p>
  
  <p>The <code>$('.box-item').each(function()...</code> piece of code always runs one time more than the total number of items with class of <code>.box-item</code>.</p>
  
  <p>How do I capture the text from the item that is being dropped only once?</p>
  
  <p>How to test (refer to <a href="https://jsfiddle.net/af8tv9bL/11/" rel="nofollow">jsfiddle</a>)</p>
  
  <ol>
  <li>Enter 4 items into the textarea (new line between each one): A, B,
  C, D</li>
  <li>Click on "populate" (the items are created in
  <code>mainContainer</code>)</li>
  <li>click on "add group"</li>
  <li>Drag items from
  <code>mainContainer</code>over to one of the containers on the right</li>
  </ol>
  
  <p>Here is the jQuery code:</p>
  
  <pre><code>    $("[id^=container]").droppable({
          drop: function(event, ui) {
              var elemId = $(this).attr("id");
              var itemid = $(event.originalEvent.toElement).attr("itemid");
              var q = 1;
              $('.box-item').each(function() {
                  // this section always runs one more time than the number of items
                  console.log (q);
                  var aaa= $(this).closest(".box-container").attr("id");  
                  console.log ("parent div: " + aaa);             
  
                  q++;
                  if ($(this).attr("itemid") === itemid) {
                      // this section gets executed twice
                      var abc = $(this).closest(".box-container").attr("id"); 
                      console.log ("from: " + abc);               
                      console.log ("append2:" + "&lt;div id='" + elemId + "'&gt;" );
                      $(this).appendTo("#" + elemId);
  
                      // what is in the div?
                      var txt = $(this).text();
                      console.log(txt);
                      var abc = $(this).closest(".box-container").attr("id");
                      console.log ("to: " + abc);                 
                  }
              });
          }
      });
  </code></pre>