Get Index of Span if based on the class available

My HTML is as below.

 <div class="col-md-12 line">

   <span class="d1  available " seatid="515" seatname="A1"></span>

   <span class="d1  available " seatid="516" seatname="A2"></span>

   <span class="d1  available " seatid="555" seatname="A3"></span>

   <span class="d1  available " seatid="556" seatname="A4"></span>

   <span></span>

   <span class="d1  available " seatid="517" seatname="A5"></span>

   <span class="d1  available " seatid="518" seatname="A6"></span>

 </div>

When I click on the span I want to get the index of span based on the available class.

Which means..

  1. Click on second last span I need the index as 4

This is the code I am using to take now.

var selector = $(this);
var selectIndex = selector.index();

Get Index of Span if based on the class available