JSFiddle - React, Tailwind, and code Playground

HTML

<select id="ddlMonth">
  <option value="1">January</option>
  <option value="2">February</option>
  <option value="3">March</option>
  <option value="4">April</option>
</select>
<select id="ddlYear">
  <option value="2010">2010</option>
  <option value="2011">2011</option>
  <option value="2012">2012</option>
  <option value="2013">2013</option>
</select>

JavaScript

$("select").each(function () {
    /*
    every drop down list gets three functions - startlistening, clearonclick, and stoplistening.
    clearonclick is stored in a variable so that it can be unhooked
    Once everything is wired up, it should look like this -but repeated once for each drop down
    var ClearOnClick = function(){
      document.getElementById("ddlMylist").selectedIndex = -1;
      StopListening();
    };
    
    function StopListening(){
      console.log("not listening...");
      document.getElementById("ddlMylist").removeEventListener("mousedown", ClearOnClick);
      document.getElementById("ddlMylist").addEventListener("change", StartListening);
    }
    
    function StartListening(){
      console.log("listening...");
      document.getElementById("ddlMylist").addEventListener("mousedown", ClearOnClick);
    }
    StartListening();
    */
    var controlName = this.id;
    //function names
    var cc_vname = "ClearOnClick_" + controlName;
    var sp_fname = "StopListening_" + controlName;
    var sl_fname = "StartListening_" + controlName;

    //full function bodies
    var clearOnClick_functionDeclaration = "var " + cc_vname + " = function(){document.getElementById('" + controlName + "').selectedIndex = -1;" + sp_fname + "();}";
    var stopListening_functionBody = "function " + sp_fname + "(){  document.getElementById('" + controlName + "').removeEventListener('mousedown', " + cc_vname + ");document.getElementById('" + controlName + "').addEventListener('change', " + sl_fname + ")}";
    var startListening_functionBody = "function " + sl_fname + "(){document.getElementById('" + controlName + "').addEventListener('mousedown', " + cc_vname + ");}";
    console.log(clearOnClick_functionDeclaration);
    console.log(stopListening_functionBody);
    console.log(startListening_functionBody);
    //create the functions for this drop down
    eval(clearOnClick_functionDeclaration);
    eval(stopListening_functionBody);
   ...