how to insert node list inside few divs?

Question

So like in my question. i use node list to creating element... After i create node i would like to put them inside few div's like that:

node = document.createElement("p");
textMark = document.createElement("mark");
textnode = document.createTextNode(el[i]);
textMark.appendChild(textnode);
node.append(textMark)
document.getElementById("div1st").appendChild(node);
document.getElementById("div2nd").appendChild(node);

but the issue is that, my node list displayd only on 2nd div... where is a issue?

my code look look that:

// el is random array, from random words, array length from 10-20 words, each word are construct from 3 to 12 letters, sometimes words are reverse

function fillUsedPass(el){
        el = shuffle(el);
        var node;
        for(i in el){
            // thats how i check if my random word are reverse(main array with words arent reverse)
            index = indexPW.indexOf(el[i]);
            if(index<0){
            var letterPW = el[i].split("");
            letterPW.reverse();
            el[i]=letterPW.join("");
            }
            node = document.createElement("p");
            textMark = document.createElement("mark");
            textnode = document.createTextNode(el[i]);
            textMark.appendChild(textnode);
            node.append(textMark)   
        document.getElementById("mainPw").appendChild(node);
        document.getElementById("subPw").appendChild(node);
        }
    }

el=['some','like','done','elem','need','to','pass','value']
addlist();
function addlist(){
node = document.createElement("p");
for(i in el){
    textMark = document.createElement("mark");
    textnode = document.createTextNode(el[i]);
    textMark.appendChild(textnode);
    node.append(textMark)
    }
    document.getElementById("div1st").appendChild(node);
    document.getElementById("div2nd").appendChild(node);
    }

#div1st{ 
background-color:red;
width:300px;
min-height:30px;}
#div2nd{ 
width:400px;
height:30px;
background-color:blue;}
mark{
padding:5px}

<div id="div1st"></div>
<div id="div2nd"></div>

Answer 1

Here, is a change. I did add a class, is that ok?

Added you password method, now working.

let el = ['some', 'like', 'done', 'elem', 'need', 'to', 'pass', 'value']

function fillUsedPass(el) {
  //el = shuffle(el); <-- assume shuffle is working. 

  let targets = document.querySelectorAll('#mainPw,#subPw'); 
  targets.forEach(target => {
  
    el.forEach((e, index) => {
      // thats how i check if my random word are reverse(main array with words arent reverse)
      //index = indexPW.indexOf(el[i]);
      if (index < 0) {
        var letterPW = e.split("");
        letterPW.reverse();
        e = letterPW.join("");
      }
      let node = document.createElement("p");
      let textMark = document.createElement("mark");
      textnode = document.createTextNode(e);
      textMark.appendChild(textnode);
      node.append(textMark)
      target.appendChild(node);
    });
  
  });
}

function addlist(elements) {
  elements.forEach(elem => {
    let node = document.createElement("p");
    el.forEach(e => {
      let textMark = document.createElement("mark");
      let textnode = document.createTextNode(e);
      textMark.appendChild(textnode);
      node.append(textMark)
    });
    elem.appendChild(node);
  });
}

addlist(document.querySelectorAll('.inputDiv'));

fillUsedPass(el);

#div1st {
  background-color: red;
  width: 300px;
  min-height: 30px;
}

#div2nd {
  width: 400px;
  height: 30px;
  background-color: blue;
}

mark {
  padding: 5px
}

<div id="div1st" class="inputDiv"></div>
<div id="div2nd" class="inputDiv"></div>
<br />
<div id="mainPw" ></div>
<div id="subPw" ></div>