title: Jquery - Getting 3 random array elements without crossover
body: <p>I'm creating an application. For part of it I need to be able to pull 3 random array elements without the same 3 repeating at all in the 1 function</p>
  
  <p>example:</p>
  
  <pre><code>var arr = ["1","2","3","4","5","6","7","8","9","10]
  $("#button").click(function()
  {
      rand = Math.floor((Math.random() * arr.length));
      $("text1").text(arr[rand]);
      rand = Math.floor((Math.random() * arr.length));
      $("text2").text(arr[rand]);
      rand = Math.floor((Math.random() * arr.length));
      $("text3").text(arr[rand]);
  })
  </code></pre>
  
  <p>I've repeated the randomizer 3 times because if I don't the number stays the same. The issue with this is that the random number generator could pull up the same number more than once. Is there a way to avoid this happening?</p>
  
  <p>If this is a dupe question, I'm sorry but it didn't show up in the suggested questions.</p>
  
  <p>EDIT: HTML Added per request</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div data-role="page" id="menu"&gt;
              &lt;div data-role="header"&gt;
                  &lt;div data-role="navbar"&gt;
                      &lt;p&gt;&lt;h2 align="center"&gt;App Name&lt;/h2&gt;&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div data-role="content"&gt;
                  &lt;div&gt;
                      &lt;h1 style="font-size:50px" align="center" id="name"&gt;&lt;/h1&gt;
                  &lt;/div&gt;
                  &lt;div style="padding-top:30px"&gt;
                      &lt;h1 align="center" id="q"&gt;&lt;/h1&gt;
                  &lt;/div&gt;
                  &lt;div style="padding-top:50px"&gt;
                      &lt;p align="center"&gt;&lt;a style="font-size:22px" id="text1"&gt;&lt;/a&gt;&lt;/p&gt;
                      &lt;p align="center"&gt;&lt;a style="font-size:22px" id="text2"&gt;&lt;/a&gt;&lt;/p&gt;
                      &lt;p align="center"&gt;&lt;a style="font-size:22px" id="text3"&gt;&lt;/a&gt;&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div style="padding-top:50px"&gt;
                      &lt;h3 align="center" id="counter"&gt;&lt;/h3&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div data-role="footer" data-position="fixed"&gt;
                  &lt;div data-role="navbar"&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a id="t"&gt;Restart&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a id="qu"&gt;Quit&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html
  </code></pre>