JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<div id="accordion">
        <% turmas.forEach((turma)=> { %>
            <div class="card">
                <div class="card-header" id="headingThree>">
                    <h5 class="mb-0 d-flex">
                        <div id="billing">
                            <input type="checkbox" id="billing-checkbox" checked>
                            <button
                                class="btn btn-info text-white collapsed d-flex align-center"
                                data-toggle="collapse" data-target="#<%= turma.nome %>"
                                aria-expanded="false" aria-controls="<%= turma.nome %>"
                                id="btn">
                                <%= turma.nome %>
                            </button>
                        </div>
                    </h5>
                </div>
            </div>
            <% }) %>

JavaScript

$(document).ready(function () {
            $('#billing-checkbox').prop('checked', localStorage.getItem('buttonDisabled') !== "disabled");
            toggleBilling({
                target: $('#billing-checkbox')[0]
            })
            $('#billing-checkbox').on('change', toggleBilling);
        });

        function toggleBilling(e) {
            $('#billing button').attr('disabled', !e.target.checked)
            localStorage.setItem('buttonDisabled', $('#billing button').attr('disabled'));
        }