html - shuffling a nodelist and traversing dom properly in javascript -

this has been kind of hard question explain i'll best..

basically, have raffle app (of sorts). have grid of images assigned names(captions) , created dynamically using javascript. end goal of have each picture on different spot on grid different name every time button clicked. names captured textarea , stored array. part, have working. issue when button clicked, images , names not random independent of each other. in other words, images move on grid, names stay same each picture.

i merely want shuffle p tags around. know it's because img , p tags part of same div, i'm lost on how these separately while still keeping grid form, otherwise things start going out of place. grid uses bootstrap.

now line in particular did sort of work me:

tdisplay.getelementsbytagname("p") [math.random() * tdisplay.children.length | 0].textcontent = names[math.random() * tdisplay.children.length | 0]; 

i know it's long , ugly, rough draft, problem not want names appearing different appear in names array. if have names array:

["jon", "tim", "tim", "bob", "sally"] 

these 5 names should appear on grid, "tim" showing 2 times , other names appearing once. random line shown above breaking rule. example when tested it, "bob" show multiple times when in array once, , "jon" left out. shuffle.

here code button logic. there 3 buttons , text area. if baseball or football button clicked, display teams of respective sport, , theres actual random button @ bottom. img , p tags appending div (newdiv), appended display div tdisplay. i've commented out lines not work.

//button logic bgroup.addeventlistener("click", function images(e) {    if (e.target.id !== "random") {     tdisplay.innerhtml = ""; (var = 0; < names.length; i++) {   var newdiv = document.createelement("div");   var newimg = document.createelement("img");   var username = document.createelement("p");    newdiv.classname = "col-sm-3 col-md-3 col-lg-2"   newdiv.appendchild(newimg);   newdiv.appendchild(username);   username.textcontent = names[i];      if (e.target.id === "baseball") {     newimg.src = "images/baseball/team" + + ".jpg";   } else if (e.target.id === "football") {     newimg.src = "images/football/team" + + ".gif";   }   tdisplay.appendchild(newdiv); };   } else {  (var = 0; <= tdisplay.children.length; i++) {    tdisplay.appendchild(tdisplay.children[math.random() * tdisplay.children.length | 0] );   //  tdisplay.appendchild(tdisplay.children[math.random() * tdisplay.children.length | 0].lastchild.innerhtml = p[math.random() * tdisplay.children.length | 0]);    // tdisplay.getelementsbytagname("p") [math.random() * tdisplay.children.length | 0].textcontent = names[math.random() * tdisplay.children.length | 0];   // names[math.random() * tdisplay.children.length | 0]; }   } }); 

i think easier redraw whole thing instead of shuffling it. need shuffle names array, take random image , prevent duplicates:

//a shuffle function taken https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array function shuffle(a) {   (let = a.length; i; i--) {     let j = math.floor(math.random() * i);     [a[i - 1], a[j]] = [a[j], a[i - 1]];   } } //a names array var names = ["john","jack"]; //a number array var numbers = array.from({length:names.length}).map((_,i)=>i);  function update(){ //shuffle shuffle(names); shuffle(numbers); tdisplay.innerhtml = ""; names.foreach(( name,i) => {  var newdiv = document.createelement("div");  var newimg = document.createelement("img");  var username = document.createelement("p");   newdiv.classname = "col-sm-3 col-md-3 col-lg-2"  newdiv.appendchild(newimg);  newdiv.appendchild(username);  username.textcontent = name;      if (e.target.id === "baseball") {     newimg.src = "images/baseball/team" + numbers[ ] + ".jpg";   } else if (e.target.id === "football") {     newimg.src = "images/football/team" + numbers[ ] + ".gif";   }   tdisplay.appendchild(newdiv); }); }