Help with a drop down box whose items are dependent on another drop down box

Store Design
1

Hi all, I am very new to shopify and want to create a form with a drop down box whose items are dependent on another drop down box. Luckily, a solution to this problem has been posted online here:

https://stackoverflow.com/questions/19728666/drop-down-box-dependent-on-the-option-selected-in-anoth…

Theres a few different solutions listed..I tried the first solution by adding the code to page.contact.liquid but I couldnt get it to work.

Below is the top solution posted on that link. I added the html code as is to my page.contact.liquid file, but I didnt know where to put the JS code.

Can someone please help make the code work for a “contact us” form on a shopify store? In case it matters, I am using the narrative theme.

Id appreciate all help! Thank you!!

HTML

<!-- Source: -->
<select id="source" name="source">
     <option>MANUAL</option>
     <option>ONLINE</option>
</select>

<!-- Status: -->
<select id="status" name="status">
    <option>OPEN</option>
    <option>DELIVERED</option>
</select>

JS

$(document).on('ready', function () {

    $("#source").on('change', function () {
        var el = $(this);
        if (el.val() === "ONLINE") {
            $("#status").append("<option>SHIPPED</option>");
        } else if (el.val() === "MANUAL") {
            $("#status option:last-child").remove();
        }
    });

});