I have following code, in which some div are hidden and only div with some class like "2020"will be visible

```js
$(document).ready(function(){
 $('.listCard').hide();
  $('.listCard.2020').show();
  console.log("last visible -->"+$(".listCard.2020:visible:last").index());
  console.log("First visible -->"+$(".listCard.2020:visible:first").index());
});
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
 <div class="col-sm listCard 2018">2018</div>
  <div class="col-sm listCard 2019">2019</div>
  <div class="col-sm listCard 2019">2019</div>
  <div class="col-sm listCard 2020">2020</div>
  <div class="col-sm listCard 2020">2020</div>
  <div class="col-sm listCard 2020">2020</div>
  <div class="col-sm listCard 2018">2018</div>
  <div class="col-sm listCard 2019">2019</div>
  <div class="col-sm listCard 2019">2019</div>
  <div class="col-sm listCard 2020">2020</div>
  <div class="col-sm listCard 2020">2020</div>
  <div class="col-sm listCard 2020">2020</div>
  <div class="col-sm listCard 2020">2020</div>
</div>
```

But when I get the index of first and last div which is visible and have class '2020' it shows different then expected.

Expected result is first visible should be 0 and last should be 6.
I just need variable which shows position of the div, can we use any other method. 

Demo with code
<https://jsfiddle.net/5ak8hvq7/1/>