Change iframe select options text isn't working and I can't figure out why. JSFiddle

First block of code changes select options successfully

//when page loads 
setTimeout(function() {           
      var iframePreLoad = $("#product-component-1631134480393").children().contents();
      iframePreLoad.find(".shopify-buy__option-select__select").ready(function(){
        iframePreLoad.find('select[name=Color] option:nth-child(1)').html('Black');        
        iframePreLoad.find('select[name=Color] option:nth-child(2)').html('Green');
      });  
}, 3000);

Second block of code is supposed to change the text when the select box is interacted with. Example when one of the options are selected, the text for both options should change but it's not working.

//When selection is made  
$("#product-component-1631134480393").on('load', function() {
    $("#product-component-1631134480393").children().contents().find("select[name=Color]").on('change', function() {
        $('select[name=Color] option:nth-child(1)').html('Black');        
        $('select[name=Color] option:nth-child(2)').html('Green');
      console.log('selection changed');
    });
});