title: display div using id after click change
body: <p>I am stuck and need a little help. New to jQuery.</p>
  
  <p>Trying to show a div with a certain ID.. but the id will change based on the buttons clicked.</p>
  
  <hr>
  
  <p>what I am trying to accomplish.. </p>
  
  <ul>
  <li>firstoption1 with secondoption1 will display something</li>
  <li>firstoption1 with secondoption2 will display something</li>
  <li>firstoption1 with secondoption3 will display something</li>
  <li>firstoption2 with secondoption1 will display something</li>
  <li>firstoption2 with secondoption2 will display something</li>
  <li>firstoption2 with secondoption3 will display something</li>
  </ul>
  
  <p>now I am stuck. Any help would be much appreciated! I have posted my code here, but if you need anything else please let me know..</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  
    var selectedFirstOption = "firstoption1";
    var selectedSecondOption = "secondoption1";
  
    $(".optionsSets").hide();
  
    $(".firstOptionButton").click(function() {
      selectedFirstOption = $(this).attr('id');
     $(".results").html("#" + selectedFirstOption + selectedSecondOption);
    });
  
    $(".secondOptionButton").click(function() {
      selectedSecondOption = $(this).attr('id');
     $(".results").html("#" + selectedFirstOption + selectedSecondOption);
    });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>button {
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;ul&gt;
    &lt;li&gt;
      &lt;button id="firstoption1" class="firstOptionButton"&gt;First Option 1&lt;/button&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;button id="firstoption2" class="firstOptionButton"&gt;First Option 2&lt;/button&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul&gt;
    &lt;li&gt;
      &lt;button id="secondoption1" class="secondOptionButton"&gt;Second Option 1&lt;/button&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;button id="secondoption2" class="secondOptionButton"&gt;Second Option 2&lt;/button&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;button id="secondoption3" class="secondOptionButton"&gt;Second Option 3&lt;/button&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;div id="firstoption1secondoption1" class="optionsSets"&gt;
    &lt;p&gt;Showing: First Option 1 + Second Option 1&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="firstoption1secondoption2" class="optionsSets"&gt;
    &lt;p&gt;Showing: First Option 1 + Second Option 2&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="firstoption1secondoption3" class="optionsSets"&gt;
    &lt;p&gt;Showing: First Option 1 + Second Option 3&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="firstoption2secondoption1" class="optionsSets"&gt;
    &lt;p&gt;Showing: First Option 2 + Second Option 1&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="firstoption2secondoption2" class="optionsSets"&gt;
    &lt;p&gt;Showing: First Option 1 + Second Option 1&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="firstoption2secondoption3" class="optionsSets"&gt;
    &lt;p&gt;Showing: First Option 1 + Second Option 1&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="results"&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>