I tried all solutions available online but unable to achieve the result! I want to access element inside iframe of my index.html page

index.html

//jquery-3.6.0 cdn
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

//iframe
<iframe id="myIFrame" src='test/button.html' width="80%" height="600"></iframe>

<script>
    $(document).ready(function () {
        //change button color inside iframe to red when clicked
        $("#iviFrame1").on("load", function () {
            $("#iviFrame1").contents().find("button").on("click", function () {
                $("#iviFrame1").contents().find("button").css("background-color", "red");
            });
        });
    });
</script>

I also tried:

$('#quizIFrame').contents().find('body')

Also tried by replacing load with ready and ready with load.. but not working!!