Adding Jquery to customize form block

Hey guys, I have been trying to create a custom form where depending on the answer to one question the next question appears or stay hidden. 

Below is the script for initial alert, before I go further. However, for some reason, Squarespace is not letting the code run and I do not get any alerts in the browser window. Any help here will be appreciated. Thank you!

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

<script>
$(document).ready(function(){
  
$('#radio-edef8e00-c0c7-4ad5-a417-3f438c79 input').click(function(){
    selection = $(this).val();
    alert(selection);
   });
});
  
</script>

Please post the URL for the page on your site with the form.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

website link: https://www.saqibanajam.art/

I'm not finding the form.

The form is the button on the top of this page here: https://saqibanajam.art/test1

I'm not finding the code you posted in the page.

That code is in the 'code injection.' I am reposting the code: 

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

<script>
$(document).ready(function(){
  
$('#radio-a03b5d9f-2634-4ca6-8147-3ad6b3666ba8 input').click(function(){
    selection = $(this).val();
    alert(selection);
   });
});
  
</script>

My thinking is when your code runs the form is not yet on the DOM because it is in a lightbox. The only way I know of to deal with this situation is a MutationObserver and is a somewhat complex piece of code.