Dynamically populating options values for select2 doesn't save to database

Hi,

I have 2 select2 dropdowns namely company_name and plan_name. The plan_name is set of values for different company_name. So I am populating the second dropdown using the below jQuery code by appending new values to the plan_name select2.

The dropdown selection is just working fine when selecting a company_name and the corresponding set of plan_name (s) is populated dynamically. But when I save the form, the selected plan_name value is not saved to the database. It is always empty. The problem is only with the dynamic population of the plan_name values.

I tried $('#mySelect2').append(newOption).trigger('change'); from https://select2.org/programmatic-control/add-select-clear-items but not works. Can you please help me what I am doing wrong here?

 jQuery(document).ready(function($) {
    $("#company_name").on("change", function() {
        var selectedValue = $(this).val();

        // Preparing plan name options 
        var options = {};
        if (selectedValue === "tatasons") {
          options = { <?php

          $tatasons_list = tatasons_list();

          if ( !empty($tatasons_list) && is_array($tatasons_list)) { 
              foreach ( $tatasons_list as $key => $value ) {
                  echo "'$key': '$value',";
              }
          }
          ?>
          };
        } else if (selectedValue === "tatachem") {
          options = { <?php 
       $tatachem_list = tatachem_list();
       if ( !empty($tatachem_list) && is_array($tatachem_list)) { 
            foreach ( $tatachem_list as $key => $value ) {
                echo "'$key': '$value',";
            }
        }
       ?>
          };
        } else if (selectedValue === "birlawhite") {
          options = { <?php 
          $birlawhite_list = birlawhite_list();
          if ( !empty($birlawhite_list) && is_array($birlawhite_list)) { 
                foreach ( $birlawhite_list as $key => $value ) {
                    echo "'$key': '$value',";
                }
            }
       ?>
          };
        }

        // Populate the second dropdown with the prepared options
        $("#plan_name").empty(); // Clear existing options
        $.each(options, function(key, value) {
          $("#plan_name").append($('<option></option>').val(key).text(value)).trigger('change');
        });
      });