title: Trying to prevent duplicate random item in DIV
body: <p>Can anyone help me with this? All I need to do is prevent a duplicate from showing. I am populating an array and randomly generating the recipes. When you refresh the page, sometimes the same item appears twice. I need to prevent this from happening. I included a Fiddle at the bottom thanks.</p>
  
  <p>Below is my code:</p>
  
  <pre><code> var recipe_data = [
     {
        "id":"11",
        "recipeName":"Hummus",
        "recipeCategory":"4",
        "recipeImageCategoryURL":"http://www.slurrpy.com/wp-content/uploads/2012/08/roasted-eggplant-hummus-800x500.jpg"
     },
     {
        "id":"12",
        "recipeName":"Antipasto",
        "recipeCategory":"4",
        "recipeImageCategoryURL":"http://static.menutabapp.com/img/cache/800x500/2012/10/23/7857b394d50293d29443dc09eac76b3d.jpeg"
     },
     {
        "id":"10",
        "recipeName":"Zucchini",
        "recipeCategory":"4",
        "recipeImageCategoryURL":"https://paleofood.io/wp-content/uploads/2016/05/garlic-shrimp-zucchini-noodle-main-800x500.jpg"
     }
  ]
  
       var categoryItems = [];
  
           $.each(recipe_data, function(i, item){
              if (item.recipeCategory == "4") { categoryItems.push(item); }
           });
  
           var similarRecipe = '';
           var randomRecipe = {};
  
  
           for(var i = 0; i &lt; categoryItems.length; i ++) {
  
              randomRecipe = categoryItems[Math.floor(Math.random()*categoryItems.length)];
              categoryItems.length = 2;
  
              similarRecipe = [ '&lt;div class="col-md-6 col-sm-6 img-margin"&gt;' + ' &lt;div class="addthis_inline_share_toolbox" data-url="' + randomRecipe.recipePageURL +'" data-title="' + randomRecipe.recipeName + '"&gt;&lt;/div&gt;' 
              + '&lt;a href="' + randomRecipe.recipePageURL +'"&gt;' + '&lt;img class="img-responsive" src="' + randomRecipe.recipeImageCategoryURL + '"&gt;' + '&lt;/a&gt;' 
              + '&lt;a href="' + randomRecipe.recipePageURL +'"&gt;' + '&lt;h3 class="recipeSubCategoryImgCaption"&gt;' + randomRecipe.recipeName + '&lt;/h3&gt;' + '&lt;/a&gt;' + '&lt;/div&gt;' ]; 
              $('#recipeSimilar').append(similarRecipe);  
  
          }
  </code></pre>
  
  <p>Here is a fiddle: <a href="https://jsfiddle.net/wn4fmm5r/" rel="nofollow noreferrer">https://jsfiddle.net/wn4fmm5r/</a></p>