title: Get each data attribute of an element and pass it on to other element as an ID
body: <p>What's the best way to accomplish this?
  I have a two divs the first group has data attributes in its children element and I want to get those data-attributes and pass it on as an id to the second divs other child elements.Im only getting the xx3</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>var dataArr = [];
  $('.child').each(function(index,el){
   var dataID = $(this).attr("data-id");
   dataArr.push(dataID);
   
  });
  
  //console.log(dataArr);
  
  dataArr.map(function(i){
    console.log(i)
    $('.child2').each(function(index,el){
    console.log($(this).attr('id',i));
  });
  
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="parent"&gt;
    &lt;div class="child" data-id="xx1"&gt;Hello world&lt;/div&gt;
    &lt;div class="child" data-id="xx2"&gt;Hello world2&lt;/div&gt;
    &lt;div class="child" data-id="xx3"&gt;Hello world3&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="parent2"&gt;
    &lt;div class="child2" id=""&gt;&lt;/div&gt;
    &lt;div class="child2" id=""&gt;&lt;/div&gt;
    &lt;div class="child2" id=""&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>