I have two different sections with classes named "red" and "blue". By default, these sections are hidden. I want to duplicate them and display them in a single container named "cont". The red button appends the red section and the blue button appends the blue section.
function createRedSection(word){
var redSection = document.getElementsByClassName('red')[redPos];
redPos++;
var redClone = redSection.cloneNode(true);
document.getElementById('cont').appendChild(redClone);
item.style.display = 'inline';
item.innerHTML = word;
}
function createBlueSection(word){
//same as red
}
Currently, the red sections appear separately from the blue ones regardless of the order in which they were clicked.
red1|red2|red3|blue1|blue2
How can I make sure that the sections display in the order I clicked them? Whether they are red or blue.
red1|blue1|red2|blue2|blue3
One solution I thought of was to use a common class name and then add the red/blue classes later.
function createRedSection(word){
var item = document.getElementsByClassName('input-item')[itemPos];
itemPos++;
var itemClone = item.cloneNode(true);
itemClone.className += " red";
document.getElementById('cont').appendChild(itemClone);
item.style.display = 'inline';
item.innerHTML = word;
}
However, this approach did not yield the expected results. The CSS styling got mixed up.