Bootstrap 5 Accordion in Partial View (ASP.NET Core) cannot collapse after expanded

I want to generate a MVC partial view with a Bootstrap 5 accordion. Here is the code:

Index.cshtml

   @{
        ViewData["Title"] = "Home Page";
    }
    
    <input type="button" class="load_btn" id="1" value="Load" />
    <div id="pv-1"></div>
    
    @section Scripts
    {
        <script type="text/javascript">
            $(function () {
                $(".load_btn").click(function () {
                    var div_id = 'pv-' + $(this).attr('id');
                    $.ajax({
                        type: "GET",
                        url: "/Home/PV",
                        success: function (response) {
                            $('#' + div_id).empty();
                            $('#' + div_id).html(response);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        },
                        error: function (response) {
                            alert(response.responseText);
                        }
                    });
                });
            });
        </script>
    }

HomeController.cs

...
namespace WebApplication4.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        public IActionResult PV()
        {
            return View("_PartialView");
        }
        ...
    }
}

_PartialView.cshtml

@{
    Layout = null;
}

<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css" />

<div class="accordion" id="2">
    <div class="accordion-item">
        <h2 class="accordion-header" id="h-1">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#c-1" aria-expanded="false" aria-controls="c-1">
                First Button
            </button>
        </h2>
        <div id="c-1" class="accordion-collapse collapse" aria-labelledby="h-1">
            <div class="accordion-body">
                TO DO
            </div>
        </div>
    </div>

    <div class="accordion-item">
        <h2 class="accordion-header" id="h-2">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#c-2" aria-expanded="false" aria-controls="c-2">
                Second Button
            </button>
        </h2>
        <div id="c-2" class="accordion-collapse collapse" aria-labelledby="h-2">
            <div class="accordion-body">
                TO BE
            </div>
        </div>
    </div>
</div>

<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.bundle.js"></script>

Click the "Load" button, I can get the Accordion successfully, and I can also expand each item, but then I cannot collapse the expanded items.

With another test, I put the accordion in the Index.cshtml directly (without using a Partial View ).

Index.cshtml

Exactly the same code with _PartialView.cshtml

And the Accordion works smoothly (can expand and collapse).

Could you help me on this strange behavior?