i am working on a project using next.js , it is an e commerce store . I designed an button animation that works on the click of a button , when the css style is active . However , i notice that the css style active which is supposed to run the animation only works for the first button in the product . The rest of the button doesnt inherit the animation for their buttons.

.container{
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.but{
  width: 270px;
  height: 80px;
  border: none;
  outline: none;
  background: #2f2f2f;
  color: #fff;
  font-size: 22px;
  border-radius: 40px;
  text-align: center;
  box-shadow: 0 6px 20px -5px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.check-box{
  width: 80px;
  height: 80px;
  border-radius: 40px;
  box-shadow: 0 0 12px -2px rgba(0,0,0,0.5);
  position: absolute;
  top: 0;
  right: -40px;
  opacity: 0;
}

.check-box svg{
  width: 40px;
  margin: 20px;
}




.active .check-box{
  right: 0;
  opacity: 1;
  transition: 1s;
}

.active p{
  margin-right: 125px;
  transition: 1s;
}

.active svg path{
  stroke-dashoffset: 0;
  transition: 1s;
  transition-delay: 1s;
}

this is the svg style i kept in the svg in the jsx

style: 3,
 stroke: "white", 
strokeDasharray: 34,
 strokeDashoffset: 34,
 strokeLinecap: "round"

now here is the jsx that contains the button

 <div className="relative flex flex-col m-5 bg-white z-30 p-10">
            <img  src={image} height={400} width={400} objectFit="contain" className="cursor-pointer" />
            <p className="my-3 pr-5 text-center ">{name}</p>
            <p className="mb-5 text-center  ">{size}</p>
            <p className="mb-5 text-center  "> ${price}</p>


            <div class="container">
                <button className="but" id="btn">
                    <p id="btnText">Add to cart</p>
                    <div class="check-box">
                        <svg style={{ style: 3, stroke: "white", strokeDasharray: 34, strokeDashoffset: 34, strokeLinecap: "round" }}
                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
                            <path fill="transparent" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
                        </svg>
                    </div>
                </button>
            </div>
        </div>