Converting a dropdown to radio buttons - event not triggering

I've been able to get the dropdown values to change when the radio buttons are selected but the product image doesn't update like it's supposed to. Image only updates when the actual dropdown is used.

Here's the page: https://the-squarespace-expert.squarespace.com/customise-home

And here's my code so far:

<script>

$(".variant-option select").each(function() {
  var select = $(this);
  var selectName = select.attr("name");

  // Create a container for the radio buttons
  var radioContainer = $("<div class='radio-container'></div>");

  select.find("option").each(function(i, e) {
    var optionValue = $(this).val();
    var optionText = $(this).text();

    // Create a radio button for each option
    $("<input type='radio' name='" + selectName + "' />")
    .attr("value", optionValue)
    .attr("id", selectName + "_" + i) // Add an ID for the label
    .attr("checked", i == 0)
    .click(function() {
        // Update the select element's value
        select.val(optionValue);

        // Trigger the change event on the select element
        select.trigger('change'); 
      })
    .appendTo(radioContainer);

    // Create a label for the radio button
    $("<label for='" + selectName + "_" + i + "'>" + optionText + "</label>")
    .appendTo(radioContainer);
  });

  // Add the radio buttons after the select element
  radioContainer.insertAfter(select);
});

</script>

Tried triggering the change event.