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

I have a html page that has, 3 div with class name as "

xyz

", Now, On page load

($(document).ready(function())

for each occurring of div "xyz" I want to introduce an inner html/child element as "

<div class="childxyz###"></div>

" where

###

represents the position number of occurrence of parent class xyz . For instance, the first occurrence of parent class xyz the child class name would be "

childxyz1

", second occurrence it would be

childxyz2

and so on.

Can someone suggest a simple solution for this?

Initial page

<div class="xyz">
//appending inner html and pass value 1 as xyz is the first occurrence
</div>

<div class="xyz">
//appending inner html and pass value 2 as xyz is the first occurrence
</div>

<div class="xyz">
//appending inner html and pass value 3 as xyz is the first occurrence
</div>

The final page when the Jquery/JS script runs should look like 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
I have included a sample code that I am working on, here I wish to replace the hard-coded value at the 0th and 1th position with a better code. Appreciate any help in this regard.

.datatableTesting0 thead tr th
.datatableTesting1 thead tr th

** What i want to achieve is a 2 Dimensional array that stores the values, such that, at the 0th position it store the content of first occurrence of class="datatableTesting" and at the 1th position the second occurrence of table with the same class name, so on and so forth.