Q: How to make a re-usable element with $(this) triggers the clicked element only I'm trying to make my JS logic to use the $(this) so I can re-use my code in multiple elements in the same page so that they are each triggered individually. 
this is my JS code:
$(".fab").on("click", function(){
  $(this).toggleClass("clicked");
  $(".screen2").addClass("active");
  $(".box2 ,.box1 ,.box3").addClass("active");
});

$("#close").on("click", function(){
  $(".screen2").removeClass("active");
  $(".fab").removeClass("clicked");  
  $(".box1 ,.box2 ,.box3").removeClass("active");  
});

My HTML:
    <div class="app"> 
  <div class="header"></div>
  <div class="content">
    <h1>Click the fab</h1>
  </div>
  <div class="fab"></div>
  <div class="screen2">
    <h1>new window</h1>
    <div id="close"></div>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</div>

how can I use properly the $(this) ?  All I'm trying to do is to make that JS code re-usable for multiple elements in the same page so that it triggers ONLY for the element where I clicked the .fab button... 

A: You also need to use $(this), .prev(), .next(), .find(), .closest() etc. to traverse the DOM to refer to the elements near the one you're working on, otherwise it will target all of the classes in your document.
$(".fab").on("click", function(){
  $(this).toggleClass("clicked");
  $(this).next(".screen2").addClass("active");
  $(this).next(".screen2").find(".box2 ,.box1 ,.box3").addClass("active");
});

$("#close").on("click", function(){
  $(this).closest(".screen2").removeClass("active");
  $(this).closest(".screen2").prev(".fab").removeClass("clicked");  
  $(this).closest(".screen2").find(".box1 ,.box2 ,.box3").removeClass("active");  
});


A: You can store the jQuery selectors in an array, iterate through it, and for each jQuery selector in the array, use jQuery's .each() to iterate through its inner elements.
In the following example, there may be multiple instances of class1 in the DOM, for example.
var arrElements = [$('#id1'), $('#id2'), $('.class1')];
for (var i = 0; i < arrElements.length; i++) {
  arrElements[i].each(function() {
    $(this).on('click', function() {
      // do stuff (use $(this) to refer to the current object)
    });
  })
}

