We used HTML to create an FAQ accordion style drop down in one of our survey questions. Is there a way to use JavaScript or add in HTML to the existing code below to identify where or which questions participants clicked?

<style>
  .faq-dropdown {
    width: 100%;
    padding: 10px;
    background-color: #f5f5f5;
    border: none;
    border-radius: 5px;
    margin-bottom: 10px;
    cursor: pointer;
    position: relative;
  }
  .faq-dropdown::after {
    content: '\25BE'; /* Unicode for down arrow */
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
  }
  .faq-answer {
    display: none;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
  }
</style>

<script>
  function toggleAnswer(index) {
    var answer = document.getElementById('faq-answer-' + index);
var answerDisplay = window.getComputedStyle(answer).display;
    answer.style.display = answerDisplay === 'none' ? 'block' : 'none';
  }
</script>

<div class="faq-dropdown" onclick="toggleAnswer(1)">Q1</div>
<div class="faq-answer" id="faq-answer-1">answer 1</div>

<div class="faq-dropdown" onclick="toggleAnswer(2)">Q2</div>
<div class="faq-answer" id="faq-answer-2">answer 2</div>

<div class="faq-dropdown" onclick="toggleAnswer(3)">Q3</div>
<div class="faq-answer" id="faq-answer-3">answer 3</div>

<!-- Add more FAQ items in the same format -->