Get each data attribute of an element and pass it on to other element as an ID

Question

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

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));
});

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="child" data-id="xx1">Hello world</div>
  <div class="child" data-id="xx2">Hello world2</div>
  <div class="child" data-id="xx3">Hello world3</div>
</div>

<div class="parent2">
  <div class="child2" id=""></div>
  <div class="child2" id=""></div>
  <div class="child2" id=""></div>
</div>

Answer 1

You can just use .each() to loop through the divs you need the data-attribute from and use .eq() with index to determine which div you need to set id for it like $('.parent2 .child2').eq(index) or with css :eq selector like $('.parent2 .child2:eq(' + index + ')')

Working Demo

$('.parent .child').each(function(index){
  var dataID = $(this).attr("data-id"); // you can use data('id') instead of attr("data-id")
  $('.parent2 .child2').eq(index).attr('id' , dataID);
  
  console.log($('.parent2 .child2').eq(index).attr('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="child" data-id="xx1">Hello world</div>
  <div class="child" data-id="xx2">Hello world2</div>
  <div class="child" data-id="xx3">Hello world3</div>
</div>

<div class="parent2">
  <div class="child2" id=""></div>
  <div class="child2" id=""></div>
  <div class="child2" id=""></div>
</div>

Note: I removed the dataArr array to make the answer clear .. for sure you can add it like you did, if you need it

Answer 2

The following approach, as I imagine most will be, is fragile in that it assumes a 1:1 ratio of .child and .child2 elements; however it is possible to do this (though I'd advocate trying to assign appropriate ids server-side rather than doing this on the client side; after all the elements may not need id properties, depending on what you're trying to do):

// cache the relevant elements:
let firstGroup = $('.child'),
  secondGroup = $('.child2');

// iterate over the secondGroup, and update the `id`
// property of each, using the .prop() method:
secondGroup.prop('id',
  // here we use an arrow function expression,
  // 'index' is the index of the current element
  // of the collection over which we're iterating,
  // '_' is the currently assigned id of the current
  // element in that group.
  // here we find the element of the firstGroup collection
  // at the same index as the current element, and
  // retrieve its data-id attribute, which is assigned
  // as the id:
  (index, _) => firstGroup.eq(index).data('id'));

let firstGroup = $('.child'),
  secondGroup = $('.child2');

secondGroup.prop('id', (index, _) => firstGroup.eq(index).data('id'));

.child::after,
.child2::after {
  content: attr(id);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="child" data-id="xx1">Hello world</div>
  <div class="child" data-id="xx2">Hello world2</div>
  <div class="child" data-id="xx3">Hello world3</div>
</div>

<div class="parent2">
  <div class="child2" id=""></div>
  <div class="child2" id=""></div>
  <div class="child2" id=""></div>
</div>

The above is functionally identical to the following:

let firstGroup = $('.child'),
  secondGroup = $('.child2');

// here we use a 'traditional' anonymous function,
// in place of the arrow-function used above:
secondGroup.prop('id', function(index, _) {
  return firstGroup.eq(index).data('id');
});

let firstGroup = $('.child'),
  secondGroup = $('.child2');

secondGroup.prop('id', function(index, _) {
  return firstGroup.eq(index).data('id');
});

.child::after,
.child2::after {
  content: attr(id);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="child" data-id="xx1">Hello world</div>
  <div class="child" data-id="xx2">Hello world2</div>
  <div class="child" data-id="xx3">Hello world3</div>
</div>

<div class="parent2">
  <div class="child2" id=""></div>
  <div class="child2" id=""></div>
  <div class="child2" id=""></div>
</div>

And that can, of course, be reproduced in plain JavaScript as well:

let firstGroup = Array.from(document.querySelectorAll('.child')),
  secondGroup = Array.from(document.querySelectorAll('.child2'));

// iterating over the secondGroup NodeList, using
// Array.prototype.forEach():
secondGroup.forEach(

  // using an Arrow function again,
  // 'el' the current element of the Array over
  // which we're iterating,
  // 'index' the index of the current element in
  // that Array.

  // here we set the id of the current element ('el')
  // to the value retrieved from the data-id attribute:
  (el, index) => el.id = firstGroup[index].dataset.id
);

let firstGroup = Array.from(document.querySelectorAll('.child')),
  secondGroup = Array.from(document.querySelectorAll('.child2'));

secondGroup.forEach(
  (el, index) => el.id = firstGroup[index].dataset.id
);

.child::after,
.child2::after {
  content: attr(id);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="child" data-id="xx1">Hello world</div>
  <div class="child" data-id="xx2">Hello world2</div>
  <div class="child" data-id="xx3">Hello world3</div>
</div>

<div class="parent2">
  <div class="child2" id=""></div>
  <div class="child2" id=""></div>
  <div class="child2" id=""></div>
</div>

And again, using a 'traditional' anonymous function rather than an Arow function:

let firstGroup = document.querySelectorAll('.child'),
  secondGroup = document.querySelectorAll('.child2');

secondGroup.forEach(
  function(el, index) {
    el.id = firstGroup[index].dataset.id;
  });

let firstGroup = document.querySelectorAll('.child'),
  secondGroup = document.querySelectorAll('.child2');

secondGroup.forEach(
  function(el, index) {
    el.id = firstGroup[index].dataset.id;
  });

.child::after,
.child2::after {
  content: attr(id);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="child" data-id="xx1">Hello world</div>
  <div class="child" data-id="xx2">Hello world2</div>
  <div class="child" data-id="xx3">Hello world3</div>
</div>

<div class="parent2">
  <div class="child2" id=""></div>
  <div class="child2" id=""></div>
  <div class="child2" id=""></div>
</div>