Toggle CSS in multiple instances individually

Toggle CSS in multiple instances individually

Hi All,

Trying to get this to work individually with each individual instance on the page (usually 5-10 questions on each page).  Right now it adds the class to every instance of the div that has the answerCorrect class.  I need the link to only turn on the specific answer associated with it.  Any help would be appreciated on how to get me there.

  1.     <script type="text/javascript">
    $(document).ready(function(){
      $(".showAnswer").click(function(){
        $(".theAnswer").toggleClass("answerCorrect");
         $(this).text($(this).text() == 'Hide Answer' ? 'Show Answer' : 'Hide Answer');
      });
    });
    </script>






HTML
  1. <ul>
                    <li>(A) 2 to 7</li>
                    <li>(B) 3 to 5</li>
                    <li class="theAnswer">(C) 6 to 7</li>
                    <li>(D) 7 to 2</li>
                    <li>(E) 7 to 5</li>
                  </ul>
                  <a href="#" class="showAnswer" >Show Answer</a>