title: Store anchor text values on a set of two consecutive click events and return those values
body: <p>I have a "question" list. Each li element has a set of "answers". I need to record the chosen anchor text values of the two valid consecutive pair of click events (question-answer pair). If the user clicks only on one or two questions but do not choose an answer I wont need to record the events.</p>
  
  <p>the markup is something like this (I can't change it):</p>
  
  <pre><code>&lt;ul class="question-list"&gt;
  &lt;li class="acordion"&gt;
      &lt;a class="question"&gt;Q:Anchor Text&lt;/a&gt;
      &lt;div class="answer"&gt;
        &lt;h3&gt;&lt;/h3&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;h6&gt;&lt;a&gt;A:Anchor Text&lt;/a&gt;&lt;/h6&gt;
        &lt;h3&gt;&lt;/h3&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;h6&gt;&lt;a&gt;A:Anchor Text&lt;/a&gt;&lt;/h6&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="acordion"&gt;
      &lt;a class="question"&gt;Q:Anchor Text&lt;/a&gt;
      &lt;div class="answer"&gt;
        &lt;h3&gt;&lt;/h3&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;h6&gt;&lt;a&gt;A:Anchor Text&lt;/a&gt;&lt;/h6&gt;
        &lt;h3&gt;&lt;/h3&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;h6&gt;&lt;a&gt;A:Anchor Text&lt;/a&gt;&lt;/h6&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>This is what I have:</p>
  
  <pre><code>  $('.question').on('click', function() {
    var questionAnchor = $(this).text();
    //I should be able to pass questionAnchor value to the next nested click event
        $('.answer a').on('click', function('{%=questionAnchor%}') {
        var question = questionAnchor;
        var answer = $(this).text();
        return question + " " + answer;
        });
    });
  </code></pre>
  
  <p>Or Should I "delegate":</p>
  
  <pre><code>$('.question').on("click", ".answer a", function() {
  //Not sure how to store the two anchor values 
  return question + " " + answer;
  });
  </code></pre>