Issue regarding htmx hx-post hx-get from page loaded with jquery load

Question

I hx-post not working

I have 3 php page,

index.php
button.php
content.php

I have added htmx cdn inside index.php head

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://unpkg.com/[email protected]" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script>

I am loading button.php on index.php using jquery load or ajax get

I am getting content.php using hx-post and hx-post is on button.php

index.php

<div class="loadbtn"></div>

<script>
    $( document ).ready(function() {
        $('.loadbtn').load('button.php');
    });
</script>

<div id="parent-div"></div>

button.php

<button hx-post="load.php"
        hx-trigger="click"
        hx-target="#parent-div"
        hx-swap="outerHTML"
>
    Click Me!
</button>

content.php

Its simple HTML content

but when I put button on index.php its start working.