JSFiddle - React, Tailwind, and code Playground

by Anwar Hussain

HTML

<form id="ticket-booking-form-1">
    <div class="select-item active">
        <!-- SELECTION ITEM -->
        <div class="selector">
            <div class="circle"></div>
        </div>
        <div class="description">
            	<h4 class="title-text">Day 1 Full Day Ticket  <span class="text-color">$129</span></h4>

        </div>
        <div class="select-input">
            <label for="qty-1">QTY</label>
            <input type="text" id="qty-1" name="qty-1" value="1" class="form-control">
        </div>
    </div>
    <div class="select-item">
        <!-- SELECTION ITEM -->
        <div class="selector">
            <div class="circle"></div>
        </div>
        <div class="description">
            	<h4 class="title-text">Day 1 Full Day Ticket  <span class="text-color">$129</span></h4>

        </div>
        <div class="select-input">
            <label for="qty-1">QTY</label>
            <input type="text" id="qty-1" name="qty-1" value="1" class="form-control">
        </div>
    </div>
    <div class="select-item">
        <!-- SELECTION ITEM -->
        <div class="selector">
            <div class="circle"></div>
        </div>
        <div class="description">
            	<h4 class="title-text">Day 1 Full Day Ticket  <span class="text-color">$129</span></h4>

        </div>
        <div class="select-input">
            <label for="qty-1">QTY</label>
            <input type="text" id="qty-1" name="qty-1" value="1" class="form-control">
        </div>
    </div>
    <!-- /END SELECTION ITEM -->
    <button type="submit" class="btn btn-base btn-lg"><span>Proceed to Checkout</span>

    </button>
</form>

CSS

.select-item {
    background-color: #f7f7f7;
    margin-bottom: 20px;
    padding: 15px;
}
.selector {
    height: 20px;
    width: 20px;
    border: 1px solid blue;
    position: relative;
}
.selector .circle {
    height: 10px;
    width: 10px;
    background-color: blue;
    position: absolute;
    top: 5px;
    left: 5px;
    opacity: 0;
}
.active .selector .circle {
    opacity: 1;
}

JavaScript

$('.select-item').on('click', function() {
	
   $(this).toggleClass('active');

})

var activeItems = $('.select-item.active');

for( var i = 0, l = activeItems.length; i < l; i++ ) {

  console.log( activeItems[i].children[1] );  
    
  console.log( activeItems[i].children[2] );

}