I'm going to show you an example that will help you to understand why it's important.
Such as you have some Box Widgets and you want to show some hidden content inside every single widget. You can do this easily when you have a different CSS class for the single widget but when it has the same class how can you do that?
Actually, that's why we use $(this)
**Please check the code and run it :) ** enter image description here
(function(){ _x000D_
_x000D_
jQuery(".single-content-area").hover(function(){_x000D_
jQuery(this).find(".hidden-content").slideDown();_x000D_
})_x000D_
_x000D_
jQuery(".single-content-area").mouseleave(function(){_x000D_
jQuery(this).find(".hidden-content").slideUp();_x000D_
})_x000D_
_x000D_
})();
_x000D_
.mycontent-wrapper {_x000D_
display: flex;_x000D_
width: 800px;_x000D_
margin: auto;_x000D_
} _x000D_
.single-content-area {_x000D_
background-color: #34495e;_x000D_
color: white; _x000D_
text-align: center;_x000D_
padding: 20px;_x000D_
margin: 15px;_x000D_
display: block;_x000D_
width: 33%;_x000D_
}_x000D_
.hidden-content {_x000D_
display: none;_x000D_
}
_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<div class="mycontent-wrapper">_x000D_
<div class="single-content-area">_x000D_
<div class="content">_x000D_
Name: John Doe <br/>_x000D_
Age: 33 <br/>_x000D_
Addres: Bangladesh_x000D_
</div> <!--/.normal-content-->_x000D_
<div class="hidden-content">_x000D_
This is hidden content_x000D_
</div> <!--/.hidden-content-->_x000D_
</div><!--/.single-content-area-->_x000D_
_x000D_
<div class="single-content-area">_x000D_
<div class="content">_x000D_
Name: John Doe <br/>_x000D_
Age: 33 <br/>_x000D_
Addres: Bangladesh_x000D_
</div> <!--/.normal-content-->_x000D_
<div class="hidden-content">_x000D_
This is hidden content_x000D_
</div> <!--/.hidden-content-->_x000D_
</div><!--/.single-content-area-->_x000D_
_x000D_
_x000D_
<div class="single-content-area">_x000D_
<div class="content">_x000D_
Name: John Doe <br/>_x000D_
Age: 33 <br/>_x000D_
Addres: Bangladesh_x000D_
</div> <!--/.normal-content-->_x000D_
<div class="hidden-content">_x000D_
This is hidden content_x000D_
</div> <!--/.hidden-content-->_x000D_
</div><!--/.single-content-area-->_x000D_
_x000D_
</div><!--/.mycontent-wrapper-->
_x000D_