A problem with a function that changes classes names

Question

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:

<button id="xs" onclick="SizeButtonStyle(this)"
  class="unclicked_size_button"><b>XS</b></button>
<button id="s" onclick="SizeButtonStyle(this)"
  class="unclicked_size_button"><b>S</b></button>
<button id="m" onclick="SizeButtonStyle(this)"
  class="unclicked_size_button"><b>M</b></button>
<button id="l" onclick="SizeButtonStyle(this)"
  class="unclicked_size_button"><b>L</b></button>
<button id="xl" onclick="SizeButtonStyle(this)"
  class="unclicked_size_button"><b>XL</b></button>

Javascript:

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));
}

Answer 1

There is nothing incorrect about the button class changing code, the unmodified JavaScript below works with no errors.

Please include more specific details of the actual error you are encountering.

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";
  }
}

.unclicked_size_button {
  padding: 0.5rem;
}

.clicked_size_button {
  padding: 0.5rem 2rem;
}

<button id="xs" onclick="SizeButtonStyle(this)" class="unclicked_size_button"><b>XS</b></button>
<button id="s" onclick="SizeButtonStyle(this)" class="unclicked_size_button"><b>S</b></button>
<button id="m" onclick="SizeButtonStyle(this)" class="unclicked_size_button"><b>M</b></button>
<button id="l" onclick="SizeButtonStyle(this)" class="unclicked_size_button"><b>L</b></button>
<button id="xl" onclick="SizeButtonStyle(this)" class="unclicked_size_button"><b>XL</b></button>