jQuery addClass adding class to all elements

Question

I am adding class to <i> and removing previous selected class on clicking <li> element. It's not adding class and removing but it's adding class to all <i> element inside <li>

jQuery

$('ul.video_menu li').click(function(e) {
    $('ul.video_menu li i').removeClass('fas fa-play');
    $('ul.video_menu li i').addClass('fas fa-play');
});

HTML

<ul class="video_menu">
    <li class="play_video"><i class="fas fa-play"></i>ABC</li>
    <li><i></i>XYZ</li>
</ul>

Answer 1

Use $(this) to only target the currently clicked li-element

$('ul.video_menu li').click(function(e) {
    $('ul.video_menu li i').removeClass('fas fa-play');
    $(this).find('i').addClass('fas fa-play');
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="video_menu">
    <li class="play_video"><i class="fas fa-play"></i>ABC</li>
    <li><i></i>XYZ</li>
</ul>