I am trying to create a graph using two dropdown lists. My goal is every time the first dropdown selected with new element, the second dropdown is refreshed to its default. To do so, here is my code.

The problem is with the current approach, every time I select an item from first menu, a new list is added to the previous one in the second dropdown. I tried to add remove statement for #selectButton1 but this entirely removes it and never allows to be displayed again. Whats the best way to refresh the second dropdown every time the selection on first one is changed?

<!-- Initialize first select button -->
<select id="selectButton"></select>

<!-- Initialize second select button -->
<select id="selectButton1"></select>


// create list for first dropdown
var allGroup = ["select", "1", "2", "3"]


// add the options to the First dropdown
d3.select("#selectButton")
  .selectAll('myOptions')
  .data(allGroup)
  .enter()
  .append('option')
  .text(function (d) { return d; }) // text showed in the menu
  .attr("value", function (d) { return d; }) // corresponding value returned by the button


// what happens selecting frist dropdwon
d3.select("#selectButton").on("change", function(d) {
 
 // clean up svg from previous graphs
  d3.select("svg").remove();

// create new svg to plot new graphs based on new selections
  svg = d3
       .select("body")
       .append("svg")
       .attr("id", "sgv")
       .attr("width", width + margin.left + margin.right)
       .attr("height", height + margin.top + margin.bottom)
       .append("g")
       .attr("id", "plot-a")
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 // take selected value from first dropdown
    var selectedOption = this.value
   

// create the list for second drop down
    var allGroup1 = ["select", "1", "2"]

    // add the options to the button. First dropdown
    d3.select("#selectButton1")
      .selectAll('myOptions')
      .data(allGroup1)
      .enter()
      .append('option')
      .text(function (d) { return d; }) // text showed in the menu
      .attr("value", function (d) { return d; }) // corresponding value returned by the button   

  
// now select the item from second dropdown
    d3.select("#selectButton1").on("change", function(d) {
      var  selectedOption1 = this.value
      
      // call the update function to draw the new graph based on the two selections
      update(selectedOption, selectedOption1)   
      })