javascript - Jquery: add iteration index to the name of the class of child/parent <divs> dynamically -

i have html page has, 3 div class name "xyz", now, on page load ($(document).ready(function()) each occurring of div "xyz" want introduce inner html/child element "<div class="childxyz###"></div>" ### represents position number of occurrence of parent class xyz . instance, first occurrence of parent class xyz child class name "childxyz1", second occurrence childxyz2 , on.

can suggest simple solution this?

initial page

<div class="xyz">             //appending inner html , pass value 1 xyz first occurrence         </div>   <div class="xyz">     //appending inner html , pass value 2 xyz first occurrence </div>   <div class="xyz">     //appending inner html , pass value 3 xyz first occurrence </div> 

the final page when jquery/js script runs should this.

<div class="xyz">     <div class="childxyz1">     </div> </div>   <div class="xyz">     <div class="childxyz2">     </div> </div>   <div class="xyz">     <div class="childxyz3">     </div> </div>   <div class="xyz">     <div class="childxyz1">     </div> </div>   <div class="xyz">     <div class="childxyz2">     </div> </div>   <div class="xyz">     <div class="childxyz3">     </div> </div>  

edit have included sample code working on, here wish replace hard-coded value @ 0th , 1th position better code. appreciate in regard.

.datatabletesting0 thead tr th .datatabletesting1 thead tr th 

** want achieve 2 dimensional array stores values, such that, @ 0th position store content of first occurrence of class="datatabletesting" , @ 1th position second occurrence of table same class name, on , forth.

$(".datatabletesting").each(function(i) {    $(this).addclass("datatabletesting" + i);  });  var tablearray2 = new array(10);  var tablearray1 = new array(10);  $('.datatabletesting0 thead tr th').each(function(i) {    var celltext = $(this).html();    tablearray1.push(celltext);  });    $('.datatabletesting1 thead tr th').each(function(i) {    var celltext = $(this).html();    tablearray2.push(celltext);  });    $('.test1').each(function(i) {    var celltext = $(this).html(tablearray1);    });    $('.test2').each(function(i) {    var celltext = $(this).html(tablearray2);    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>  <table class="datatabletesting" cellspacing="0" width="100%">    <thead>      <tr>        <th>first name</th>        <th>position</th>        <th>office</th>      </tr>    </thead>    <tbody>      <tr>        <td>tiger</td>        <td>system architect</td>        <td>edinburgh</td>        </tr>    </tbody>  </table>    <table class="datatabletesting" cellspacing="0" width="100%">    <thead>      <tr>        <th>last name</th>        <th>salary</th>      </tr>    </thead>    <tbody>      <tr>        <td>nixon</td>        <td>$320,800</td>      </tr>    </tbody>  </table>    <table class="test1" cellspacing="0" width="100%"></table>  <table class="test2" cellspacing="0" width="100%"></table>

allnodes = document.getelementsbyclassname("xyz"); for(var i=0;i<allnodes.length;i++){     newnode = document.createelement("div");     newnode.classname = "childxyz" + (i+1);     allnodes[i].appendchild(newnode); } 

this?