title: How to specifically splice out an item from a user made array?
body: <p>I'm attempting to add/remove specific items from my array using only one button.
  So far, when i click the button it will push the item into the array, if i click again it will remove the item from the array.
  My problem is if i have more buttons which add a different item to my array each time, clicking any of the buttons again will completely empty the array.</p>
  
  <p>I know its my splice, and it might just because its 1 AM, but i'll be damned if i can understand what i am doing wrong. if anyone could show me the correct way to do this that would be awesome.
  Here's my sample code,</p>
  
  <pre><code>    var libary =  Array();
  
      Array.prototype.contains = function ( needle ) {
         for (i in this) {
             if (this[i] == needle) return true;
         }
         return false;
      }
  
      function btn1() {
          if (libary.contains("Big Book")){
          libary.splice("Big Book");
          document.getElementById("1").style.cssText = "border: 0;border-radius:0;border-color:0;box-shadow:0;}";
          }else{
          libary.push("Big Book");
          document.getElementById("1").style.cssText = "border: 5px solid #4099FF;border-radius: 12px;outline: none;border-color: #4099FF;box-shadow: 0 0 15px #4099FF;}";
          }
      };
     function btn2() {
      if (libary.contains("Small Book")){
      libary.splice("Small Book");
      document.getElementById("2").style.cssText = "border: 0;border-radius:0;border-color:0;box-shadow:0;}";
      }else{
      libary.push("Small Book");
    document.getElementById("2").style.cssText = "border: 5px solid #4099FF;border-radius: 12px;outline: none;border-color: #4099FF;box-shadow: 0 0 15px #4099FF;}";
    }
  };
  </code></pre>
  
  <p>Bare in mind this is just a sample, and there are roughly 20 more buttons.</p>