Append Options tag to a modal using JQuery

Question

I have a modal that I am appending based on user selection. Here is the code:

var options = {
'option1': {'display': 'Series A', 'optionsB': {'name': 'John', 'city': 'Doe'}},
'option2': {'display': 'Series B', 'optionsB': {'name': 'Jane', 'city': 'Maria'}},
}

HTML

<button type="button" id="examPle" data-bs-toggle="modal" data-bs-target="#exampleModal" class="btn btn-primary">Get Example</button>

<div id="exampleModal" class="modal" tabindex="-1">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Example Modal</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
<form class="form" id="exampleform" name="exaple" method="post" required> 
    {% csrf_token %}
    <div id="selectoptions" data-datasets="{{ options }}">
        <select id="option1" class="form-select form-select-sm mb-1">
            <option value="...">Select Option 1</option>
        </select>
        <select id="option2"  class="form-select form-select-sm mb-1">
            <option value="...">Select Option 2</option>
        </select>
    </div>
</form>
</div>
</div>
</div>
</div

Then Javascript

function updateOptions(){
   var options = $('#selectoptions').data('datasets');
   for (const opt1 in options) {
       $('#option1').append($('<option>', {
         value: opt1,
         text: options[opt1]['display']
          }))
        }
   $('#option1').on('click', function(e){
   var option1 = $('#option1').val();
   for (const opt2 in options[option1]['optionsB']) {
       $('#option2').append($('<option>', {
         value: opt2,
         text: options[option1]['optionsB'][opt2]
          }))
        }
})
}
$(function(){
updateOptions();
});

Here is a link to a link that somehow works but in my case doesn't work. The question is, how do you dynamically append options tags in various elements based on users selections and why is this not working for me in my local machine?

Thanks

var options = {
'option1': {'display': 'Series A', 'optionsB': {'name': 'John', 'city': 'Doe'}},
'option2': {'display': 'Series B', 'optionsB': {'name': 'Jane', 'city': 'Maria'}},
}
function updateOptions(){
   /* var options = $('#selectoptions').data('datasets') */;
   for (const opt1 in options) {
       $('#option1').append($('<option>', {
         value: opt1,
         text: options[opt1]['display']
          }))
        }
   
   $('#option1').on('click', function(){
   var option1 = $('#option1').val();
     for (const opt2 in options[option1]['optionsB']) {
         $('#option2').append($('<option>', {
           value: opt2,
           text: options[option1]['optionsB'][opt2]
            }))
          }
      })
}
$(function(){
updateOptions();
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<button type="button" id="examPle" data-bs-toggle="modal" data-bs-target="#exampleModal" class="btn btn-primary">Get Example</button>

<div id="exampleModal" class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Example Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form class="form" id="exampleform" name="exaple" method="post" required> 
          <div id="selectoptions">
            <select id="option1" class="form-select form-select-sm mb-1">
              <option value="...">Select Option 1</option>
            </select>
            <select id="option2"  class="form-select form-select-sm mb-1">
              <option value="...">Select Option 2</option>
            </select>
         </div>
       </form>
     </div>
    </div>
  </div>
</div>