Dropdown menu selection issue.

[ajoy123rocks]

        <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span id="selected">CHOOSE ARTICLE</span><span class="caret"></span></a>
           
          </button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">All</a>
            <a class="dropdown-item" href="#">Art. 1: Definitions</a>
            <a class="dropdown-item" href="#">Art. 2: Playing Court</a>
            <a class="dropdown-item" href="#">Art. 3: Equipment</a>
            <a class="dropdown-item" href="#">Art. 4: Teams</a>
            <a class="dropdown-item" href="#">Art. 5: Players: Injury and assistance</a>
            <a class="dropdown-item" href="#">Art. 6: Captain: Duties and powers</a>
            <a class="dropdown-item" href="#">Art. 7: Head coach and first assistant coach: Duties and powers</a>
            <a class="dropdown-item" href="#">Art. 8: Playing time, tied score and overtime</a>
            <a class="dropdown-item" href="#">Art. 9: Beginning and end of a quarter, overtiem or the game</a>
            <a class="dropdown-item" href="#">Art. 10: Status of the ball</a>
            <a class="dropdown-item" href="#">Art. 11: Location of a player and a referee</a>
            <a class="dropdown-item" href="#">Art. 12: Jump ball and alternating possession</a>
            <a class="dropdown-item" href="#">Art. 13: How the ball is played</a>
            <a class="dropdown-item" href="#">Art. 14: Control of the ball</a>
            <a class="dropdown-item" href="#">Art. 15: Player in the act of shooting</a>
            <a class="dropdown-item" href="#">Art. 16: Goal: When made and its value</a>
            <a class="dropdown-item" href="#">Art. 17: Throw-in</a>
            <a class="dropdown-item" href="#">Art. 18: Time-out</a>
            <a class="dropdown-item" href="#">Art. 19: Substitution</a>
            <a class="dropdown-item" href="#">Art. 20: Game lost by forfeit</a>
            <a class="dropdown-item" href="#">Art. 21: Game lost by default</a>
            <a class="dropdown-item" href="#">Art. 22: Violations</a>
            <a class="dropdown-item" href="#">Art. 23: Player out-of-bounds and ball out-of-bounds</a>
            <a class="dropdown-item" href="#">Art. 24: Dribbling</a>
            <a class="dropdown-item" href="#">Art. 25: Travelling</a>
            <a class="dropdown-item" href="#">Art. 26: 3 seconds</a>
            <a class="dropdown-item" href="#">Art. 27: Closely guarded player</a>
            <a class="dropdown-item" href="#">Art. 28: 8 seconds</a>
            <a class="dropdown-item" href="#">Art. 29: 24 seconds</a>
            <a class="dropdown-item" href="#">Art. 30: Ball returned to the backcourt</a>
            <a class="dropdown-item" href="#">Art. 31: Goaltending and Interference</a>
            <a class="dropdown-item" href="#">Art. 32: Fouls</a>
            <a class="dropdown-item" href="#">Art. 33: Contact: General principles</a>
            <a class="dropdown-item" href="#">Art. 34: Personal foul</a>
            <a class="dropdown-item" href="#">Art. 35: Double foul</a>
            <a class="dropdown-item" href="#">Art. 36: Technical foul</a>
            <a class="dropdown-item" href="#">Art. 37: Unsportsmanlike foul</a>
            <a class="dropdown-item" href="#">Art. 38: Disqualifying foul</a>
            <a class="dropdown-item" href="#">Art. 39: Fighting</a>
            <a class="dropdown-item" href="#">Art. 40: 5 fouls by a player</a>
            <a class="dropdown-item" href="#">Art. 41: Team fouls: Penalty</a>
            <a class="dropdown-item" href="#">Art. 42: Special situations</a>
            <a class="dropdown-item" href="#">Art. 43: Free throws</a>
            <a class="dropdown-item" href="#">Art. 44: Correctable errors</a>
            <a class="dropdown-item" href="#">Art. 45: Referees,table officials and commissioner</a>
            <a class="dropdown-item" href="#">Art. 46: Crew chief: Duties and powers</a>
            <a class="dropdown-item" href="#">Art. 47: Referees: Duties and powers</a>
            <a class="dropdown-item" href="#">Art. 48: Scorer and assistant scorer: Duties</a>
            <a class="dropdown-item" href="#">Art. 49: Timer: Duties</a>
            <a class="dropdown-item" href="#">Art. 50: Shot clock operator: Duties</a>
            <a class="dropdown-item" href="#">B: The Scoresheet</a>
            <a class="dropdown-item" href="#">C: Protest Procedure</a>
            <a class="dropdown-item" href="#">D: Classification of teams</a>
            <a class="dropdown-item" href="#">E: Media Time-outs</a>
            <a class="dropdown-item" href="#">F: Instant Replay System</a>
          </div>
        </div>

        <h5 class="roundborder1" style="text-align: center;font-size:25px"><b>RULES QUIZ</b></h5>
        <div class="panel">         
          <br>
          <div class="question-container" id="question">
            
              Question goes here.
          </div>
          <br><br>
          <div class="option-container">
              <button class="option" onclick="" id="op1" >YES</button>
        
              <button class="option" onclick="" id="op2" >NO</button>
          </div>
          <br><br>
          <div class="result" id="key">
    
          </div>
          <br><br>
          <div class="navigation">
            <button class="prev"><b>PREV</b></button>
            <button class="next" ><b>NEXT</b></button>
              
          </div>

      </div>

<script>
const Questions = [{
  id: 0,
  q: "Basketball is played by two teams of 12 players each.",
  a: [{ text: "YES", isCorrect: false },
      { text: "NO", isCorrect: true }
  ],
  k: "Basketball is played by two teams of 5 players each.(Art. 1 (1.1))"
},
{
  id: 1,
  q: "The aim of each team is to score in the opponent’s basket.",
  a: [{ text: "YES", isCorrect: true,},
      { text: "NO", isCorrect: false }

  ],
  k: "The aim of each team is to score in the opponent’s basket and to prevent the other team from scoring.(Art. 1 (1.1))" 
},
{
  id: 2,
  q: "The basket that is attacked by the team is its own basket.",
  a: [{ text: "YES", isCorrect: false },
      { text: "NO", isCorrect: true }

  ],
  k: "The basket that is attacked by the team is the opponent's basket basket.(Art. 1 (1.2))" 
}

]

// Set start
var start = true;

// Iterate
function iterate(id) {

  
// Getting the result display section
var result = document.getElementsByClassName("result");
result[0].innerText = "";

// Getting the question
const question = document.getElementById("question");


// Setting the question text
question.innerText = Questions[id].q;

// Getting the options
const op1 = document.getElementById('op1');
const op2 = document.getElementById('op2');

op2.style.backgroundColor = "var(--primary-color)";
op2.style.color = "black";
op1.style.backgroundColor = "var(--primary-color)";
op1.style.color = "black";


// Providing option text 
op1.innerText = Questions[id].a[0].text;
op2.innerText = Questions[id].a[1].text;


// Providing the true or false value to the options
op1.value = Questions[id].a[0].isCorrect;
op2.value = Questions[id].a[1].isCorrect;

//key.innerText = Questions[id].k;


var selected = "";

// Show selection for op1
op1.addEventListener("click", () => {
  op1.style.backgroundColor = "black";
  op1.style.color = "var(--primary-color)";
  op2.style.backgroundColor = "var(--primary-color)";
  op2.style.color = "black";
  selected = op1.value;
  key.innerText = Questions[id].k;
  if (selected == "true") {
      result[0].innerText = "CORRECT \n" + key.innerText ;
      result[0].style.color = "#00FF00";
   
  } else {
      result[0].innerText = "WRONG \n" + key.innerText   ;
      result[0].style.color = "#FF0000";

  }


})

// Show selection for op2
op2.addEventListener("click", () => {
  op1.style.backgroundColor = "var(--primary-color)";
  op1.style.color = "black";
  op2.style.backgroundColor = "black";
  op2.style.color = "var(--primary-color)";
  selected = op2.value;
  key.innerText = Questions[id].k;
  if (selected == "true") {
      result[0].innerText = "CORRECT \n" + key.innerText  ;
      result[0].style.color = "#00FF00";
      
  } else {
      result[0].innerText = "WRONG \n" + key.innerText   ;
      result[0].style.color = "#FF0000";
          
  }


})

}

if (start) {
iterate("0");
}

// Next button and method
const next = document.getElementsByClassName('next')[0];
var id = 0;

next.addEventListener("click", () => {
start = false;

if (id < 2) {
  id++;
  iterate(id);
  console.log(id);
}

})

const prev = document.getElementsByClassName('prev')[0];

prev.addEventListener("click", () => {
  start = false;

if (id > 0) {
  id--;
  iterate(id);
  console.log(id);
}
})

$('.dropdown-menu a').click(function(){
    $('#selected').text($(this).text());
  });

</script>

.question-container{

  background-color: black;
  font-size: x-large;
  text-align: center;
    
}
.option-container{
  display: flex;
  justify-content: space-evenly; 
  background-color: black;   
      
}
.result{

  text-align: center;
  font-size: 25px;
    
}

.option{    
  border-color: white;
  font-family: tahoma;
  font-weight: bold;
  width: 10vw;
  height: 8vh;
  font-size: 20px;
}

.option{    
  border: 2px solid var(--primary-color); 
  color: black;
  text-transform: uppercase;
  transition: all 0.5s ease-in-out;
  border-radius: 10px;
  background: var(--primary-color);
}


.option:hover,.option:focus{
  background: transparent;
  text-decoration: none;
  color: white;
  font-weight: bold;
  outline: none;
  cursor: pointer;
}


.navigation{
  display: flex;
  justify-content: space-evenly;
  background-color:black;
}

.next,.prev{
  border-color: white;
  font-family: tahoma;
  font-weight: bold;
  width: 15vw;
  height: 8vh;
  font-size: 20px;

}

.next,.prev{
  border: 2px solid var(--primary-color); 
  color: black;
  text-transform: uppercase;
  transition: all 0.5s ease-in-out;
  border-radius: 10px;
  background: var(--primary-color);
  
}
.next:hover,.next:focus{ 
  background: transparent;
  text-decoration: none;
  color: white;
  font-weight: bold;
  outline: none;
  cursor: pointer;
  
  }
  .prev:hover,.prev:focus{ 
    background: transparent;
    text-decoration: none;
    color: white;
    font-weight: bold;
    outline: none;
    cursor: pointer;
    
    }

    .dropdown-menu {
      max-height: 280px;
      overflow-y: auto;
  }

I am trying to create a quiz via html. The dropdown menu contains All and other several options.

When i select "All" , all the questions must be available to the user

When I select any of the options, only questions related to that topic must be available to the user.

How can i achieve this? Kindly help.

[ajoy123rocks]

Any help will be much appreciated