how to append multiple div from different list of length in jquery?

Question

Here, I have two different container. First one is group of anchor links. There is no elements in html. Section one different group of content blocks. How to an append elements based on group of content blocks.

Here is my html,

<div id="group1">
    <div class="parent1">
    </div>
    <div class="parent2">
    </div>
    <div class="parent3">
    </div>
</div>
<div id="group2">
     <div class="parentMain1">
        <div class="content">test</div>
        <div class="content">test</div>
        <div class="content">test</div>
     </div>
     <div class="parentMain2">
         <div class="content">test</div>
         <div class="content">test</div>
     </div>
     <div class="parentMain3">
         <div class="content">test</div>
     </div>
 </div>

My result should be,

<div id="group1">
        <div class="parent1">
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
        </div>
        <div class="parent2">
            <a href="#">1</a>
            <a href="#">2</a>
        </div>
        <div class="parent3">
            <a href="#">1</a>
        </div>
    </div>
    <div id="group2">
         <div class="parentMain1">
            <div class="content">test</div>
            <div class="content">test</div>
            <div class="content">test</div>
         </div>
         <div class="parentMain2">
             <div class="content">test</div>
             <div class="content">test</div>
         </div>
         <div class="parentMain3">
             <div class="content">test</div>
         </div>
     </div>

How to achieve this one with jquery?

Answer 1

You can try this code :

// get all direct child of group 2 element
$('#group2').children().each(function (i, e) {
 // get direct child of group 2 element's child
  var length = $(this).children().length;
  // loop over particular length
  for (var m = 1; m <= length; m++) {
   // create anchor element 
   $('<a/>', {
        href: '#',
        text: m
    }).appendTo($('div#group1').find('div:eq(' + i + ')')); // append to group 1 element respectively
  }
});

DEMO