title: A problem with a function that changes classes names
body: <p>So I have this function that changes a class name to another if a button is clicked and then I have other function that gets that changed classes name and receives that element with the class changed, but im getting undefined instead of the element im looking for and I don't know why. Besides I want to ask you guys if its possible to in local storage add items with the key superior to the highest I got, imagine I have one item there with (1,"John"), and the next one I had has the key 2 ?
  Html: </p>
  
  <pre><code>&lt;button id="xs" onclick="SizeButtonStyle(this)"
    class="unclicked_size_button"&gt;&lt;b&gt;XS&lt;/b&gt;&lt;/button&gt;
  &lt;button id="s" onclick="SizeButtonStyle(this)"
    class="unclicked_size_button"&gt;&lt;b&gt;S&lt;/b&gt;&lt;/button&gt;
  &lt;button id="m" onclick="SizeButtonStyle(this)"
    class="unclicked_size_button"&gt;&lt;b&gt;M&lt;/b&gt;&lt;/button&gt;
  &lt;button id="l" onclick="SizeButtonStyle(this)"
    class="unclicked_size_button"&gt;&lt;b&gt;L&lt;/b&gt;&lt;/button&gt;
  &lt;button id="xl" onclick="SizeButtonStyle(this)"
    class="unclicked_size_button"&gt;&lt;b&gt;XL&lt;/b&gt;&lt;/button&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre class="lang-js prettyprint-override"><code>function SizeButtonStyle(el) {
    var size = el;
  
    if (el.id == "xs") {
      document.getElementById("xs").className = "clicked_size_button";
      document.getElementById("s").className = "unclicked_size_button";
      document.getElementById("m").className = "unclicked_size_button";
      document.getElementById("l").className = "unclicked_size_button";
      document.getElementById("xl").className = "unclicked_size_button";
    }
    if (el.id == "s") {
      document.getElementById("xs").className = "unclicked_size_button";
      document.getElementById("s").className = "clicked_size_button";
      document.getElementById("m").className = "unclicked_size_button";
      document.getElementById("l").className = "unclicked_size_button";
      document.getElementById("xl").className = "unclicked_size_button";
    }
    if (el.id == "m") {
      document.getElementById("xs").className = "unclicked_size_button";
      document.getElementById("s").className = "unclicked_size_button";
      document.getElementById("m").className = "clicked_size_button";
      document.getElementById("l").className = "unclicked_size_button";
      document.getElementById("xl").className = "unclicked_size_button";
    }
    if (el.id == "l") {
      document.getElementById("xs").className = "unclicked_size_button";
      document.getElementById("s").className = "unclicked_size_button";
      document.getElementById("m").className = "unclicked_size_button";
      document.getElementById("l").className = "clicked_size_button";
      document.getElementById("xl").className = "unclicked_size_button";
    }
    if (el.id == "xl") {
      document.getElementById("xs").className = "unclicked_size_button";
      document.getElementById("s").className = "unclicked_size_button";
      document.getElementById("m").className = "unclicked_size_button";
      document.getElementById("l").className = "unclicked_size_button";
      document.getElementById("xl").className = "clicked_size_button";
    }
  }
  
  function addToCartClicked(event) {
    var product = document.getElementsByClassName("product_name")[0].innerText;
    var price = document.getElementsByClassName("price")[0].innerText;
    var info = [product, "XS", price];
    console.log(info);
    localStorage.setItem("names", JSON.stringify(info));
  }
  </code></pre>