Different dropdown boxes for items generated from db.

Different dropdown boxes for items generated from db.

Hello,
I have a page where it loads some items from db.
I want each item to have a "settings" dropdown box in which there will be options like "edit, delete etc...".

I made it to a point but the thing is that when i click an entry's settings button to open up the dropdown box, it collapses every item's dropdown box in page. 

This is my HTML and Jquery code so far...
Html settings btn:
  2. <a href="#" class="settings-btn" id="entry-settings" data-entry-id="<?php echo $pet['pet_entry_id']; ?>" rel="nofollow"><i class="fas fa-cog"></i></a>
  3.   <div class="settings-menu">
  4.      <ul class="list-unstyled">
  5.         <li><a href="<?php echo base_url('pets/edit/' . $pet['pet_entry_id']) ?>"><i class="fas fa-pencil-alt fa-sm"></i>Edit</a></li>
  6.         <li><a href="#" class="delete" data-entryid="<?php echo $pet['pet_entry_id']; ?>"><i class="far fa-trash-alt fa-sm"></i>Delete</a></li>
  7.       </ul>
  8.    </div>

Jquery:
  2.   $('.settings-btn').click(function() {
  3.     if ( $('.settings-menu').hasClass('active') ) {
  4.       $('.settings-menu').removeClass('active');
  5.     } else {
  6.       $('.settings-menu').addClass('active');
  7.     }
  8.   });
Any ideas on that!? 
Thank you