title: Jquery loop through same elements, get content and rearrange content element by element
body: <p>I have several html-article-elements. All have the same classes. Inside every article, there is a paragraph with a class called "iwantyou". I want to get the innerHTML/content of this paragraph and place it at the top of the article.</p>
  
  <p>I tried to simply loop. But that gives me the content of ALL iwantyou-divs on the page. So the result is, in every article, I have the text of all iwantyou-divs from the page combined, but I need only the one in the article.</p>
  
  <p>That's the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  
          $('.category-material').each(function(index, value) {
             $('.iwantyou').each(function(index, value) {
               $(".summery").append($(value).text());
              }); 
          });
      
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h1 {
    font-weight:bold;
  }
  
  div {
    color:blue;
    
  }
  
  .summery {
    color:red;
  }
  
  p {
    color:grey;
  }
  
  span {
    text-decoration:underline;
    color:grey;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;article class="category-material"&gt;
    &lt;h1&gt;Numerber One &lt;/h1&gt;
      &lt;div class="summery"&gt;
        &lt;span&gt;Here the text from iwantyou of first article should go:&lt;/span&gt;
      &lt;/div&gt;
  
  &lt;p class="iwantyou"&gt; summery no one&lt;/p&gt;
  &lt;p&gt;not touched&lt;/p&gt;
    
  &lt;/article&gt;
  &lt;hr&gt;
  
  &lt;article class="category-material"&gt;
  &lt;h1&gt; Number Two &lt;/h1&gt;
  &lt;div class="summery"&gt;
    &lt;span&gt;Here text from iwantyou of second article should go:&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;p class="iwantyou"&gt;Summery no two&lt;/p&gt;
  &lt;p&gt; not touched &lt;/p&gt;
  
  &lt;/article&gt;</code></pre>
  </div>
  </div>
  </p>