E-commerce Product Page - Copy this Html, Bootstrap Component to your project

fai in modo che quando clicco sul bottone cambi lo stato del form-check-input in checked: <button type="button" role="radio" aria-checked="false" data-state="unchecked" value="year" class="aspect-square border-2 data-[state=checked]:border-2 focus:outline-none focus:border-2 disabled:cursor-not-allowed disabled:opacity-50 relative flex text-nowrap min-w-[271px] max-w-min w-full items-center !border border-gray-300 bg-white p-2 px-3 text-start text-foreground h-[48px] max-lg:max-w-full max-sm:h-[48px] max-sm:px-4 max-lg:mx-[unset] rounded-full focus:bg-[#EBF9F2] focus:border-[#0D6EFD] active:bg-[#E6F0FF] data-[state=checked]:bg-[#E6F0FF] hover:border-[#0D6EFD] data-[state=checked]:border-[#0D6EFD]" id="r2"> <div class="form-check"> <div class="d-flex justify-content-between align-items-center w-100"> <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2"> <label class="form-check-label" for="flexRadioDefault2"> <span class="me-1 fs-4 fw-bold">€<span id="yearPrice">179</span></span> <span class="text-muted">/year</span> <span class="badge bg-primary">Save 20%</span> </label> </div> </div> </button>