Selecting a button active class

Question

these are the cards and I have written javascript to select the button and turn it into an active class but when I select the button it is not select and not turn into an active button where is the mistake

in the style tag, I have written what all I want to do when the button is hovered or is active

here is the javascript

<script>
// Add active class to the current button (highlight it)
var header = document.getElementById("price");
var head = header.getElementsByClassName("card");
var btns = head.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  if (current.length > 0) { 
    current[0].className = current[0].className.replace(" active", "");
  }
  this.className += " active";
  });
}
</script>

.card .card-body a{
  margin-bottom: 2.5rem;
  border: solid yellow;
  border-top-width: initial!important;
  color: white;
  background-color: transparent;
  font-size: 1.3rem;
  min-width:13rem;
} 
  


.card .card-body a:hover{
  color: #d6c926;
  {% comment %} border: none; {% endcomment %}
  {% comment %} border-bottom: solid blue; {% endcomment %}
  background-color: #191818cf;
  font-family:cursive;
  text-decoration: none;
  {% comment %} animation: border-line 3s ease forwards;  {% endcomment %}
} 
  


.card .card-body a:active,
.card .card-body a.active{
  background-color: #d6c926!important;
  color: black!important;
  border: black!important;
  font-family: cursive;
} 

<div class="form-row" id="price">
                <div class="card border-warning mb-3" style="max-width: 18rem;">
                    <div class="card-header"><strong>1 Mounth</strong></div>
                    <div class="card-body text-warning">
                        <h5 class="card-title">Warning card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a class="btn btn-primary active 1_mon">Select This</a>
                    </div>
                </div>

                <div class="card border-warning mb-3" style="max-width: 18rem;">
                    <div class="card-header"><strong>6 Mounth</strong></div>
                    <div class="card-body text-warning">
                        <h5 class="card-title">Warning card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a class="btn btn-primary 6_mon">Select This</a>
                    </div>
                </div>

            
                <div class="card border-warning mb-3" style="max-width: 18rem;">
                    <div class="card-header"><strong>10 Mounth</strong></div>
                    <div class="card-body text-warning">
                        <h5 class="card-title">Warning card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a  class="btn btn-primary 10_mon">Select This</a>
                    </div>
                </div>
            </div>

after this, I have to take the value of the button and store it into a hidden input tag

Answer 1

try this:-

<script>
var btns = document.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
  var current = document.getElementsByClassName("active");
  if (current.length > 0){ 
    current[0].className = current[0].className.replace(" active", "");
  }
  this.className += " active";
  });
}
</script>