JSFiddle - React, Tailwind, and code Playground

by rchod

HTML

<button id="add">
add
</button>

<div id="lists-container">
</div>

JavaScript

list_0 = ["papa", "mama", "mimi", "momo"];
lists = []
selected = [];
j = 0;

addList = function(lists, j){
  var str = "";
  for(i=0; i<lists.length; i++){
  var opts = "";
  var list = lists[i];
    for(var item in list){
    var disabled = selected[i] ?"disabled": '';
		opts += '<option +'disabled'+ id="'+item+'" value="'+list[item]+'" >'+list[item]+'</option>'
  }
  str += "<select id='"+j+"' onchange='foo(this)' >"+opts+"</select>"
  }
  $("#lists-container").html(str);
}

$("#add").click(function(){
lists.push(list_0)
addList(lists,j);
  var item_id = $(self).find("option:selected").attr("id");
  var select_id = $(self).attr("id");
  selected[select_id] = item_id;
j++
})

foo = function(self){
  var item_id = $(self).find("option:selected").attr("id");
  var select_id = $(self).attr("id");
  selected[select_id] = item_id;
  log(selected);
}

function log(m){ console.log(m) }