Dependant dynamically created select(dropdown) fields that run their .change() on page load

I haven’t been in the active programming game for some time so forgive me if the description of my problem is poorly worded.

I have select forms that are generated (using flask) from a database. The database table pre-populates the forms where a value exists, otherwise the code i’m trying to figure out will be used to fill in those blanks by selecting some dependant dropdowns (their values also come from a DB table).

I have ~11 rows of dynamically created ‘s in two columns. one column is dependant on the other. i did manage to get that working using this:

the left column of selects are named: “sel_dstColumn_XXX” where XXX is the row ID in the database.
the right column of selects are named: “sel_dstTable_XXX” and both XXX’s are the same per row. sel_dstColumn_XXX is dependant on sel_dstTable_XXX and works using this .change() below.

  $("select[id^=sel_dstTable]").change(function () {
    table = this.value;
    my_s = this.id.split('_')[2];
    $.get("/get_columns/" + table, function (data, status) {
      var selID = "select[id=sel_dstColumn_" + my_s + "]";
      $(selID).html("");
      data.forEach(function (table) {
        $(selID).append("<option>" + table + "</option>");
      });
    });
  });

i think the code above has the same issues as my code that’s not working but its ok because i’m only working with a single field unlike further down.

the python portion is simple and looks like this for the $.get() url:

@app.route('/get_columns/<value>')
def get_columns(value):
    if value in all_tables:
        return jsonify(all_tables[value])
    return ''

I would like to run this for all the selects with the name sel_dstTable_XXX on page load to pre-populate the dependant selects based on what (if any) values are pulled from the database. I’m trying this below (duplicate code but i dont know how to call the .change() for all the proper forms.. it doesn’t work due to the variable “my_s” not properly passing into the $.get() function. i’m not understand why my_s produces the results below in the console screenshot.

this is what i’m currently working with. it’s mostly duplicate code from my .change() function. i’m not sure how to just call that change function for each select on startup though.

  $(function () {
    $("select[name^=sel_dstTable_]").each(function () {
      table = this.value;
      my_s = this.id.split('_')[2];
      console.log("expected variable my_s: " + my_s);
      $.get("/get_columns/" + table, function (data, status) {
        console.log("actual variable my_s:" + my_s);
# PROBLEM ON THE LINE ABOVE reading my_s, i only get the last row ID (22), instead of 12, 13, 14, 15... etc produced when looping through the .each().
        // var selID = "select[name=sel_dstColumn_" + my_s + "]";
        // $(selID).html("");
        // data.forEach(function (table) {
        //   $(selID).append("<option>" + table + "</option>");
        // });
      });
    });
  });

console output

Thank you so much for any help – i’ve been fighting this all week. I hope this description makes sense.