Jquery selector to get all dropdown values, issues for 2 dropdowns

Question

HTML Table

Row#1 : Col 1 [Country DropDown] | Col #2 [StateDropDown]

Row#2 : Col 1

Answer 1

This is not a perfect solution which you just can copy/paste, but it's getting real close to what you want.

I made it as a whole function with 4 arguments:

1. The real table, preferably an id
2. The td, preferably a class
3. The hidden table to be cloned, preferably an id
4. The new row button, preferably an id

Leaving you free to name your things like you want in the HTML and not caring about to fix the MULTIPLE places where those 4 are used in the script.

Now... This is just a good start.
In fact, when user changes from "Country A" to "Country B", the state dropdown should be different!

This is the only issue I left... Since I don't know how you want to load those options.

It took me quit a lot time... I did it because I couldn't believe that such a "simple" request can be that complex... I had to crush it
;).

So here is the code (JS only) and a working CodePen demo.

var excusiveSelect = function(tableID,rowCLASS,dummyID,cloneBtn){   // Preferably ID, CLASS, ID, ID

  console.clear();

  // Cloning function
  var cloneRow = function(){
    var newrow = $(dummyID).find(rowCLASS).clone();
    $(tableID).append(newrow);
    refresh_mapping();
  };

  // Generate new lines
  $(cloneBtn).on("click",cloneRow);

  // ================================================================================ INITIALISATION
  // Selection mapping
  var row_count;
  var row_map = {};

  // Get select clas names per colums
  var col_count = $(rowCLASS).first().find("td").length;
  var col_classes = [];
  for(i=0;i