title: Change between menu/buttons
body: <p>So I've got this menu where you can choose the class in my game.</p>
  
  <pre><code>&lt;div class="text"&gt;
  &lt;div id="story"&gt;Choose a class.&lt;/div&gt;
  &lt;input type="button" class="knight" value="Knight"/&gt;
  &lt;input type="button" class="mage" value="Mage"/&gt;
  &lt;input type="button" class="archer" value="Archer"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How do I use jquery so that when I press any of these buttons, I'll get a new set of buttons which you can press to choose your race?</p>
  
  <p>I've tried <code>.replaceWith()</code> but jquery won't work on the new buttons.
  It will take the css.</p>
  
  <pre><code>function classChange() {
      var Class = $(this).val();
      $('#statsImg').text("class: " + Class);
      $('.knight').replaceWith('&lt;input type="button" class="elf value="Elf"/&gt;');
      $('.mage').replaceWith('&lt;input type="button" class="human" value="Human"/&gt;');
      $('.archer').replaceWith('&lt;input type="button" class="Dwarf" value="Dwarf"/&gt;');
      $('.menu').show();
  };
  
  $('.knight').click(classChange);
  $('.mage').click(classChange);
  $('.archer').click(classChange);
  </code></pre>
  
  <p>Button <code>elf</code> won't do anything with the next part:</p>
  
  <pre><code>$('.elf').on('click', '.elf',function () {
      $('#statsImg').text('test');
  });
  </code></pre>
  
  <p>Works with button <code>knight/mage/archer</code>.</p>
  
  <p>So what I'd like to know is how do I get rid of this menu and get a new menu once I press a button?</p>
  
  <p>Sorry if I forgot to add something that you need to know. I'll add it if you need it.</p>