As a beginner, I am working on a project where I need to select the specific li element that is clicked using jQuery. However, I am facing an issue where clicking on one li selects all of them at once. Here is the link to my code snippet:
JS FIDDLE
This is how my HTML looks:
var clicks = 0;
$("li").on("click", function () {
clicks++;
$('.top-right').html(clicks);
});.list li {
list-style-type: none;
display: inline-block;
background-color: white;
margin-right: 7px;
}
.list {
margin: 5px;
}
.list li a {
text-decoration: none;
color: black;
padding: 2px;
}
.list li a:hover,
.list li a:hover {
color: black;
}<!DOCTYPE html>
<html>
<head>
<title>Exam</title>
</head>
<body>
<div class="list">
<ul>
<li>
<a href="#">NAME
<span class="line"></span> AWONUSI OLAJIDE</a>
<span class="top-right"></span>
</li>
<li>
<a href="#">NAME
<span class="line"></span> ADEGBULUGBE TIMILEHIN</a>
<span class="top-right"></span>
</li>
<li>
<a href="#">NAME
<span class="line"></span> OLUOLU ADEDEJI</a>
<span class="top-right">9999</span>
</li>
<li>
<a href="#">NAME
<span class="line"></span> OYAJE JOSHUA</a>
<span class="top-right">9999</span>
</li>
<li>
<a href="#">NAME
<span class="line"></span> ALABI OJO ADE</a>
<span class="top-right">9999</span>
</li>
<li>
<a href="#">NAME
<span class="line"></span> AKILO AWANI</a>
<span class="top-right">9999</span>
</li>
<li>
<a href="#">NAME
<span class="line"></span> AYUBA DEJIMARK</a>
<span class="top-right">9999</span>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>