How can a span id that div classes are applied to be looped?

Question

I'm new to coding, and I'm trying to learn the basics. I wanted to practice what I learned by making flashcards (nothing complicated like saving it, importing it, or exporting it). So far, I made a table that the user can edit. I know how to gather data from the table, but I don't know how to make a CSS flashcard appear every time the user adds a card to the table. I am aware that the code will not work since I put the CSS in JavaScript since this code is just meant to show what I am trying to do. Also, if I am taking a completely wrong approach, please let me know. Thank you, Please excuse the poor variable naming. I was just testing some things.

<script>

 function getFlashcardValue() {
 
 for (var repeat = 0; repeat < 200; repeat++) {
 var Table = document.getElementById('flashcardsTable');
 
 var column1 = 0;
 var column2 = 1;
 
 var numberOfFlashcards = 2;
 
 for (var row = 0; row < numberOfFlashcards; row++) {
 
 var Cells = Table.rows.item(1).cells;
 
 var Question1 = Cells.item(column1).innerHTML;
 
 
 var Cells1 = Table.rows.item(1).cells;
 
 var Answer1 = Cells.item(column2).innerHTML;
 
 
 document.getElementById("myFlashcardQuestion" + row).innerHTML =  Question1;
 
 document.getElementById("myFlashcardAnswer" + row).innerHTML =  Answer1;
 
 <div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
    <span id="myFlashcardQuestion1"></span>
    </div>
    <div class="flip-card-back">
    <span id="myFlashcardAnswer1"></span>
    </div>
  </div>
</div>
}
 
 }
 
}
</script>

<p style = "font-size: 25px">Hover over the flashcard to flip it!</p>


<style>
.flip-card {
  background-color: transparent;
  width: 350px;
  height: 175px;
  margin: auto;
  padding: 5px 5px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  background-color: lightblue;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: lightblue;
  width: 350px;
  height: 175px;
  color: black;
  font-size: 35px;
  text-alignment: center;
}

.flip-card-back {
  background-color: red;
  color: white;
  font-size: 35px;
  text-alignment: center;
  transform: rotateY(180deg);
}
</style>

Answer 1

So first of all you can create a code snippet in stackoverflows editor (see below), or use jsfiddle and post a shared-link. It depends on which action the user has to do after he enters the data. If it is, for example, a button click, then it is possible to call a function that shows the user's input in the flashcard. Now if you want that for every single Q&A you have to create Elements in the for loop and edit them there. Here a little example.

 var allCards = document.getElementById("allCards"); for (var i = 1; i <= 5; i++) { //i used 5, you should use length of data var question = document.createElement("div"); question.textContent = "Question " + i; question.classList.add("flip-card"); allCards.appendChild(question); }

 .flip-card { background-color: lightblue; width: 350px; height: 175px; margin: 10px auto; padding: 5px 5px; font-size: 35px; text-align: center; }

 <div id="allCards"></div>

Edit: As promised, here is an example of how you can set up the flip cards.

https://jsfiddle.net/ybu59hfp/1/

Your concern should now be resolved. If you have any further questions, feel free to write to me in the chat or read a little about JavaScript on the Internet.