title: shuffling a nodelist and traversing dom properly in javascript
body: <p>this has been kind of a hard question to explain so i'll do my best..</p>
  
  <p>basically, i have a raffle app (of sorts). i have a grid of images that are assigned names(captions) and are created dynamically using javascript. the end goal of it is to have each picture on a different spot on the grid with a different name every time a button is clicked. the names are captured from a textarea and stored into an array. for the most part, i have it working. my only issue is that when the button is clicked, the images and names do not random independent of each other. in other words, the images will move on the grid, but the names stay the same for each picture.</p>
  
  <p>i merely just want to shuffle the p tags around. i know it's because my img and p tags are part of the same div, but i'm lost on how to do these separately while still keeping the grid form, otherwise things start going out of place. the grid uses bootstrap.</p>
  
  <p>now this line in particular did sort of work for me:</p>
  
  <pre><code>tDisplay.getElementsByTagName("p") [Math.random() * tDisplay.children.length | 0].textContent = names[Math.random() * tDisplay.children.length | 0];
  </code></pre>
  
  <p>i know it's long and ugly, just rough draft, but my problem with this is that i do not want names appearing any different than they appear in the names array. so if i have a names array:</p>
  
  <pre><code>["jon", "tim", "tim", "bob", "sally"]
  </code></pre>
  
  <p>these 5 names should appear on the grid, with "tim" showing 2 times and the other names appearing once. the random line shown above was breaking this rule. as an example when i tested it, "bob" would show up multiple times when it is only in the array once, and "jon" would be left out.  i would just like to shuffle. </p>
  
  <p>here is my code for my button logic. there are 3 buttons and a text area. if the baseball or football button is clicked, it will display teams of the respective sport, and then theres the actual random button at the bottom. the img and the p tags are appending to a div (newDiv), which is then appended to the display div tDisplay. i've commented out lines that do not work.</p>
  
  <pre><code>//button logic
  bGroup.addEventListener("click", function images(e) {
  
    if (e.target.id !== "random") {
      tDisplay.innerHTML = "";
  for (var i = 0; i &lt; 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" + i + ".jpg";
    } else if (e.target.id === "football") {
      newImg.src = "images/football/team" + i + ".gif";
    }
    tDisplay.appendChild(newDiv);
  };
  
  
  } else {
  
  for (var i = 0; i &lt;= 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];
  }
    }
  });
  </code></pre>