JSFiddle - React, Tailwind, and code Playground

by learner001

HTML

<div class="dropdown"> 
  <div class="dropdown-header">My Dropdown</div>
  <div class="dropdown-content">
    <div class="normal-option">
      <div class="option">A</div>
      <div class="option">B</div>
      <div class="option">C</div>
      <div class="option">D</div>
      <div class="option">E</div>
    </div>      
    <div class="option more">Load More</div>
  </div>
</div>

JavaScript

$('.dropdown-header').click(function(event){
	$('.dropdown-content').toggle();
  event.stopPropagation();
})

$(window).click(function(){
	$('.dropdown-content').hide();
})

$(document.body).on('click', '.option:not(.more)', function(event){
	alert('clicked option ' + this.innerHTML);
  event.stopPropagation();
})

$('.option.more').click(function(event){
	let value;
	for(var i = 0; i < 5; i++){
  	value = Math.floor((Math.random() * 100) + 1);
    $('.normal-option').append($('<div class="option">').html(value));
  }  
  event.stopPropagation();
})