Make sure that randomly assigned attribute is not duplicating

I have this scenario. There are six differently positioned placeholders on the page. I have six different words, and each word should be randomly assigned to one placeholder.

What I want to achieve is that there are no duplicated words, e.g. placeholder nr.3 gets "Word-1" and placeholder nr.6 gets "Word-1".

This is the JavaScript that I am using to randomly assign words to placeholders, in my case paragraph elements.

var word_1 = $('#main').append('<p class="word word-1"></p>'),
word_2 = $('#main').append('<p class="word word-2"></p>'),
word_3 = $('#main').append('<p class="word word-3"></p>'),
word_4 = $('#main').append('<p class="word word-4"></p>'),
word_5 = $('#main').append('<p class="word word-5"></p>'),
word_6 = $('#main').append('<p class="word word-6"></p>');

var pos_1 = $('.word-1').css({'left' : '0', 'right' : '0', 'top' : '48%'})
var pos_2 = $('.word-2').css({'left' : '-400px', 'right' : '0', 'top' : '58%'})
var pos_3 = $('.word-3').css({'left' : '0', 'right' : '-400px', 'top' : '36%'})
var pos_4 = $('.word-4').css({'left' : '0', 'right' : '-320px', 'top' : '61%'})
var pos_5 = $('.word-5').css({'left' : '-500px', 'right' : '0', 'top' : '36%'})
var pos_8 = $('.word-6').css({'left' : '-320px', 'right' : '0', 'top' : '46%'})

var words = ['word-1', 'word-2', 'word-3', 'word-4', 'word-5', 'word-6'];

$('.word').each(function(){
classIndex = Math.floor(Math.random() * words.length);
$(this).text(words[classIndex]);
})

Here is a fiddle that illustrates what I want to achieve. http://ift.tt/1FLIyW7