Как сделать пагинацию в виде квадратов в JS?

Привет!Мне нужно сделать чтобы если светится один то отображается class=content1 если 2 то class="content2", а если 3 то class="content3".И при этом может отображаться только один контент.

$(document).ready(function(){
  $(".btn").click(function() {
    $("#myModal").modal('show');
  });
});


var boxArray = document.getElementById("boxes").getElementsByTagName("p");
var length = boxArray.length;
var active_class_name = "active";

function handleIt() {
	if ( boxArray[boxArray.length - 1].className == active_class_name ) {
		for ( var counter = 1; counter < length; counter++ )
				boxArray[counter].classList.remove(active_class_name);
			
		return;
	}

	for ( var counter = 0; counter < length; counter++ ) {
		if ( boxArray[counter].className == active_class_name && !boxArray[counter+1].classList.contains(active_class_name) ){
			boxArray[counter + 1].classList.add(active_class_name);
			break;
		}
	}
}

<div class="modal-body">
				<!-- content modal -->
				<div class="modal_content_inp modal_main_custom class1">
				<div>
						<p>You send:</p>
						<div class=" Bitcoin-input-cont">
							<input class="Bitcoin-input-cont-spec" type="text">
							<img src="./img/-----14.png" alt="bitcoin">
							<span>
								<i class="fas fa-caret-down"></i>
							</span>
						</div>
					</div>
					<div>
						<p>You get:</p>
							<div class="Bitcoin-input-cont">
								<span>$</span>
								<input type="text">
								<img class="Bitcoin-fix" src="./img/-----15.png" alt="PAYPAL">
								<span>
									<i class="fas fa-caret-down"></i>
								</span>
							</div>
					</div>
				</div>
				<p class="modal_bonus_text">+ Bonus $20</p>
				<div class="modal_bdc_list">
					<ul>
						<li><span>1 BTC -</span><span> 5%</span></li>
						<li><span>2 BTC -</span><span> 10%</span></li>
						<li><span>2 BTC -</span><span> 20%</span></li>
					</ul>
					<ul>
						<li><span>1 BTC -</span><span> 5%</span></li>
						<li><span>2 BTC -</span><span> 10%</span></li>
						<li><span>2 BTC -</span><span> 20%</span></li>
					</ul>
					<ul>
						<li><span>1 BTC -</span><span> 5%</span></li>
						<li><span>2 BTC -</span><span> 10%</span></li>
						<li><span>2 BTC -</span><span> 20%</span></li>
					</ul>
				</div>
				<div class="btn_bitoc_button"><button id="myButton" onclick="handleIt()" class="Bitcoin-input-button-modal">Next stage</button></div>
				<div class="line_hov_model" id="boxes">
					<p class="active"></p>
					<p></p>
					<p></p>
				</div>
			</div>

.modal_main_custom
	display: flex
	justify-content: center				
.modal_content_inp
	margin-top: 40px
	div:first-child
		margin-right: 15px
.modal_bdc_list
	display: flex
	justify-content: space-around
	margin-top: 35px
	box-shadow: 0px 15px 20.8px 0.2px rgba(0, 0, 0, 0.08)
	border-radius: 13px
	max-width: 530px
	margin: auto
	margin-top: 35px
	ul
		list-style: none
		padding: 0
		li
			font-family: "CircleBold"
			font-weight: bold
			color: #272727
			span:last-child
				color: #00e3ac
	ul:first-child
		padding-left: 20px	
.modal_bonus_text
	font-family: "CircleBold"
	font-weight: bold
	color: #00e3ac
	text-align: right
	padding-right: 75px	
	padding-top: 5px
.Bitcoin-input-button-modal
	background-image: linear-gradient(266deg, #00b1e7, #00e3ac)
	box-shadow: 0px 15px 20.8px 0.2px rgba(0, 0, 0, 0.08)
	font-family: "CircleBold"
	font-size: 16px
	border-radius: 39px
	border: none
	outline: none
	padding: 25px 70px 25px 70px
	margin-top: 20px
	margin-left: 5px
	color: #ffffff
	&:focus
		outline: none	
.btn_bitoc_button
	justify-content: center
	display: flex
.line_hov_model
	display: flex
	justify-content: center
	margin-top: 30px
	margin-bottom: 20px
	p
		width: 100px
		height: 10px
		background-color: gray
		border-radius: 10px
		margin: 0 10px 0 10px
.active
	background-image: linear-gradient(266deg, #00b1e7, #00e3ac)