JSFiddle - React, Tailwind, and code Playground

by Husar

HTML

<div>
    <h2>This is div 1</h2>
</div>

<div>
    <h2>This is div 2</h2>
</div>

<div>
    <h2>This is div 3</h2>
</div>

<span>
    <p id="bla">Bla bla</p>
    <p id="other">Other stuff</p>
    <p id="another">Another paragraph</p>
    <p id="yet">Yet another</p>
    <p id="yes1">yes</p>
    <p id="yes2">yes</p>
</span>

CSS

h2 { font-weight : bold; margin-bottom: 5px }
div { margin-bottom : 20px; }
span { display: none; }

JavaScript

var array = [ 
    [ "bla", "other"], 
    [ "another"], 
    [ "yet", "yes1", "yes2" ] 
    ];
    

var divs = $('div'),
    pars = $('span').find('p'),
    parsId = [];

pars.each( function() {
    parsId.push($(this).attr('id'));
});


for ( var i = 0; i < array.length; i++ ) {
    
    for ( var j = 0; j < array[i].length; j ++ ) { 
        
        for ( var k = 0; k < pars.length; k ++ ) { 
            
            if ( array[i][j] === parsId[k]) {
               array[i][j] = pars[k];
            }
            
        }
        
    }
    
    divs.eq( i ).append( array[i] );
}