jQuery Forum

SITUATION
Howdy, I have made a function which sends parsed xml elements into two adjacent boxes in random order. The first box contains questions and the  second box contains answers. The answers are hidden to begin with, but there is a click function which reveals the answers when the user is ready.  

Here is the xml file structure:

<?xml version="1.0" encoding="UTF-8"?>
<Questions>

    <Question>
        <QuestionOutput>Question</QuestionOutput>
        <AnswerOutput>Answer</AnswerWord>
    </Question>

    <Question>
        <QuestionOutput>Question</QuestionOutput>
        <AnswerOutput>Answer</AnswerWord>
    </Question>

    <Question>
        <QuestionOutput>Question</QuestionOutput>
        <AnswerOutput>Answer</AnswerWord>
    </Question>

</Questions>

Here is the HTML that the output goes into. (I should put the "Answers" button somewhere else, but I am not worried about it atm.

<div class="containWidth">
    <div class="container">
        <div class="box"><div id="Questions"></div></div>
        <div class="box"><div id="Answers"></div></div>
        <div class="box"><a id="ShowAnswersOutput" href="javascript:void(0);"><button>Answers</button></a></div>               
    </div>
</div>

Here is the script:

 $.ajax({
            url: x,
            type: 'GET',
            dataType: 'xml',
            success: parseXML
       });
})

<!--Shuffle-->
    $.shuffle = function(arr) {
    for(
    var j, x, i = arr.length;
    i;
    j = Math.floor(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x
    );
    return arr;
    }
    $.fn.shuffle=function(){
    return $.shuffle(this)
    }
   
<!--Display Questions & Answers-->
    function parseXML(xml) {
                         
        var QuestionsOutput = '';
        var AnswersOutput = '';
                            
        $(xml).find('Question').shuffle().each(function(){               
        QuestionsOutput += $(this).find('QuestionOutput').text() + '<br />' + '<br />';
        AnswersOutput += $(this).find('AnswerOutput').text() + '<br />' + '<br />';   
        })
   
        $('#Questions').html(QuestionsOutput);
        $('#Answers').hide().html(AnswersOutput);

        $('#ShowAnswersOutput').click(function(){
        $('#AnswersOutput').show();
        })   
       
        }

QUESTION
The above function works, but I don't like how the click function reveals all of the answers at the same time. I want separate click functions, for each outputted question and (hidden) answer, that the user clicks to reveal said answer. E.g if an xml file contained 5 question & answer elements, 5 questions would be outputted and 5 "answer" buttons would be adjacent to each question (each one revealing the answer to it's particular question).

I am using a" container" class in the html because it appears to keep the questions and answers aligned. I am guessing that it will need to be replaced with something that divides the xml elements into their own little areas to be manipulated individually. I don't have the foundational knowledge for that kind of thing. Any suggestions or directions would be really helpful.

Thanks guys