JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row span12">
      <ul class="thumbnails">
        <li class="span3 product">
          <div class="thumbnail padding">
            <h3>Product name</h3>
            <p>Description</p>
          </div>
        </li>
        <li class="span3 product">
          <div class="thumbnail padding">
            <h3>Product name</h3>
            <p>Description</p>
          </div>
        </li>
        <li class="span3 product">
          <div class="thumbnail padding">
            <h3>Product name</h3>
            <p>Description</p>
          </div>
        </li>
        <li class="span3 product">
          <div class="thumbnail padding">
            <h3>Product name</h3>
            <p>Description</p>
          </div>
        </li>
      </ul>
    </div>

JavaScript

function shuffle(o)
{ //v1.0
    for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};

function AddProducts(products) 
{
    shuffle(products);

    $('.product').each(function(i) {
        if (products[i]) {
            $(this).find('h3').html(products[i].name);
        }
    });
}

AddProducts([{name: 'foo'}, {name: 'bar'}, {name: 'baz'}, {name: 'dude'}]);