Add class based on text options clicked - html

Question

I am in the middle of building my portfolio. What I would like to do:
I would like to let my user 'ask questions' by clicking a chain of divs, depending on each div clicked, possible options connected to that div will then highlight and when the question has been asked, a answer depending on the specific chain would then appear (what type of answer is not important).
So if I have 5 divs:
<div class="what">What</div>
<div class="would">Would</div>
<div class="like">Like</div>
<div class="you">You</div>
<div class="i">I</div>
And my user clicks on the 'What' div, the 'Would' div would highlight (add a class), if then clicked, the 'You' and 'I' divs would highlight and so forth. This would enable my user to ask a question based on the original word/div clicked and which words I then have chosen to 'connect' to that word/div.
I would then like to be able to use the specific string (of words) to fun a function, append a class or such. So that the question 'What', 'Would', 'You' and 'Like' would, as an example show a choice of 3 sentences to choose from, but the question of 'What', 'Would', 'I' and 'Like' would, as an example show a picture of a hotdog or some sort.
I do know a bit of JavaScript, but a little more jQuery, so I would prefer to work in that language if possible. I know that the question is a little complex and that I have not included any code, but I really did not know how to go around this.

Answer 1

Hope this will help:
<style type="text/css">
.highlighted{
background-color:yellow;
}
.container2 , .container1{
cursor:pointer;
margin-bottom: 3%;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".Common").click(function(){
var classes = $(this).attr("data");
$( ".highlighted" ).removeClass( "highlighted" );
$( "."+classes ).addClass( "highlighted" );
});
});
</script>
<div class="container1">
<div data="FRUITS" class="Common">FRUITS</div>
<div data="VEGETABLES" class="Common">VEGETABLES</div>
<div data="ANIMALS" class="Common">ANIMALS</div>
<div data="BIRDS" class="Common">BIRDS</div>
</div>
<div class="container2" >
<div class="BIRDS" >Parrot</div>
<div class="FRUITS" >Apples</div>
<div class="VEGETABLES" >Cucumber</div>
<div class="FRUITS" >Oranges</div>
<div class="VEGETABLES" >Carrot</div>
<div class="ANIMALS" >Lion</div>
<div class="BIRDS" >Dove</div>
<div class="ANIMALS" >Tiger</div>
</div>

Answer 2

I don't understand your question. Maybe like this?
<style type="text/css">
.highlighted{
background-color:yellow;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".test").click(function(){
var id = this.id ;
id++;
if(id>5){
id =1;
}
$( ".test" ).removeClass( "highlighted" );
$( "#"+id ).addClass( "highlighted" );
});
});
</script>
<div class="what test" id="1">What</div>
<div class="would test" id="2">Would</div>
<div class="like test" id="3">Like</div>
<div class="you test" id="4">You</div>
<div class="i test" id="5">I</div>