Demonstrate d3 enter-update-exit pattern for divs

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  body {
    font: 16px sans-serif;
    margin: 50px;
  }
  #pudomap-legend {
    margin-top: 30px;
  }
  .legend-pu {
    border: 1px solid #000;
    background-color: #e66101;
  }
  .legend-do {
    border: 1px solid #808080;
    background-color: #5e3c99;
  }
  .legend-puMax {
    border: 1px solid #747474;
    background-color: #fdb863;
  }
  .legend-puMid {
    border: 1px solid #747474;
    background-color: #f7f7f7;
  }
  .legend-puMin {
    border: 1px solid #747474;
    background-color: #b2abd2;
  }
  .legend div span {
    border-radius: 50%;
    display: inline-block;
    height: 12px;
    margin-right: 5px;
    width: 12px;
  }
</style>

const legendTexts = {
      "pu": [
          {id: 1, text: "Pick-ups only", span:"legend-pu"}
        ],
      "do": [
          {id: 5, text: "Drop-offs only", span:"legend-do"}
        ],
      "pudo": [
          {id: 1, text: "Pick-ups only", span:"legend-pu"},
          {id: 2, text: "Pick-ups > 55%", span:"legend-puMax"},
          {id: 3, text: "Pick-ups 45&ndash;55%", span:"legend-puMid"},
          {id: 4, text: "Pick-ups < 45%", span:"legend-puMin"},
          {id: 5, text: "Drop-offs only", span:"legend-do"}
        ]
    }

plotPudoLegend = function(data) {
      const dataLayer = d3.select("#pudomap-legend");

let root = dataLayer
        .selectAll(".levels", function(d) {
          return d.id; // Binds data by id
        })
        .data(data);

// Add div nodes
      const newGroup = root
        .enter()
        .append("div")
        .attr("class", "levels")
        .attr("id", function(d, i) {
          return `lev${i}`;
        });

// Add span under each div node
      newGroup
        .append("span")
        .attr("class", function(d, i) {
          return d.span;
        });

// Add text for each NEW div
      newGroup
          .append("text")
          .html(function(d) {
            return d.text;
          });

// Update span class of EXISTING div
      root.select("span")
        .attr("class", function(d) {
          return d.span;
        });

// Update text of EXISTING div
      root.select("text")
         .html(function(d) {
           return d.text;
         });

root.exit().remove();
    }
    // -----------------------------------------------------------------------------
    function uiHandler(event) {
      if (event.target.id === "pudo-menu") {
        whichPUDO = event.target.value; // "pudos" initially
        plotPudoLegend(legendTexts[whichPUDO]); // Update map legend
      }
    }

plotPudoLegend(legendTexts["pudo"]);

$(document).on("change", uiHandler);

</script>

</body>
</html>

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js