matching relevant button to image

Question

I have created a favorites page that allows the user to save any item they choice. Every time this page loads/refreshes the items and buttons are randomized. Is there a way to match the items with the relevant button once shuffled/randomized? Below is a link to a quick example I made. Remove the comments from the JS to 'shuffle' the image and buttons.

https://jsfiddle.net/gu7ccv5d/2/

/* var gridOnHomePage = document.querySelector(".grid"), // get the list
    temp = gridOnHomePage.cloneNode(true), // clone the list
    i = temp.children.length + 1;

// shuffle the cloned list (better performance)
while( i-- > 0 )
    temp.appendChild( temp.children[Math.random() * i |0] );

gridOnHomePage.parentNode.replaceChild(temp, gridOnHomePage); */

<div class="grid">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Red_flag.svg/2000px-Red_flag.svg.png" width="50" height="50" />
  <button type="button" class="addToFavorites" color="red" img="https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Red_flag.svg/2000px-Red_flag.svg.png">
    Add Red
  </button>
  <img src="http://epochmod.com/forum/uploads/monthly_2015_09/2000px-Solid_blue.svg.png.09e2d6f1de3f9a9192388a1737c19280.png" width="50" height="50" />
  <button type="button" class="addToFavorites" color="blue" img="http://epochmod.com/forum/uploads/monthly_2015_09/2000px-Solid_blue.svg.png.09e2d6f1de3f9a9192388a1737c19280.png">
    Add Blue
  </button>
  <img src="http://greensportsalliance.org/images/darkGreenSquare.gif" width="50" height="50" />
  <button type="button" class="addToFavorites" color="green" img="http://greensportsalliance.org/images/darkGreenSquare.gif">
    Add Green
  </button>
</div>

Answer 1

here is a working snippet

var gridOnHomePage = document.querySelector(".grid"), // get the list
    temp = gridOnHomePage.cloneNode(true), // clone the list
    i = temp.children.length + 1;

// shuffle the cloned list (better performance)
while( i-- > 0 )
    temp.appendChild( temp.children[Math.random() * i |0] );

gridOnHomePage.parentNode.replaceChild(temp, gridOnHomePage);

<div class="grid">
<span>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Red_flag.svg/2000px-Red_flag.svg.png" width="50" height="50" />
  <button type="button" class="addToFavorites" color="red" img="https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Red_flag.svg/2000px-Red_flag.svg.png" >Add Red
  </button>
</span>

<span>
  <img src="http://epochmod.com/forum/uploads/monthly_2015_09/2000px-Solid_blue.svg.png.09e2d6f1de3f9a9192388a1737c19280.png" width="50" height="50" />
  <button type="button" class="addToFavorites" color="blue" img="http://epochmod.com/forum/uploads/monthly_2015_09/2000px-Solid_blue.svg.png.09e2d6f1de3f9a9192388a1737c19280.png" >Add Blue 
  </button>
</span>
<span>
 <img src="http://greensportsalliance.org/images/darkGreenSquare.gif" width="50" height="50" />
  <button type="button" class="addToFavorites" color="green" img="http://greensportsalliance.org/images/darkGreenSquare.gif" >Add Green
  </button>
</span>
</div>