title: How do I keep the attribute from removing the class after being clicked
body: <p>I was wondering how I keep the attribute to not remove the class once it's been clicked on, as I use a class for styling my buttons (bootstrap)</p>
  
  <pre><code>function resetButtons()
  {
      document.getElementById('snog').removeAttribute('class');
      document.getElementById('marry').removeAttribute('class');
      document.getElementById('avoid').removeAttribute('class');
  }
  </code></pre>
  
  <p>Here is the buttons codes</p>
  
  <pre><code>$('#snog').click(function() {
      resetButtons();
      document.getElementById('snog').setAttribute('class','selected');
      document.getElementById('answer_type').value = 1;
      showForm();
      console.log("Snog selected");
  });
  
  $('#marry').click(function() {
      resetButtons();
      document.getElementById('marry').setAttribute('class','selected');
      document.getElementById('answer_type').value = 2;
      showForm();
      console.log("Marry selected");
  });
  
  $('#avoid').click(function() {
      resetButtons();
      document.getElementById('avoid').setAttribute('class','selected');
      document.getElementById('answer_type').value = 3;
      showForm();
      console.log("Avoid selected");
  });
  </code></pre>
  
  <p>And, the HTML with the classes</p>
  
  <pre><code>&lt;div class="form-group text-center"&gt;
  &lt;input type="button" id="snog" class="btn btn-lg btn-success" value="Snog" sma_value="1"&gt;
  &lt;input type="button" id="marry" class="btn btn-lg btn-success" value="Marry" sma_value="2"&gt;
  &lt;input type="button" id="avoid" class="btn btn-lg btn-success" value="Avoid" sma_value="3"&gt;
  </code></pre>
  
  <p>Sorry for the blunt question/</p>