JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
<script src="https://js.arcgis.com/3.15/init.js"></script>
<body>
  <div id="btns"></div>
  <!--<button id="btnSelect">Push Me</button>-->
  <div id="map"></div>
</body>

CSS

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.esriMapLayers > svg circle {
  transition: all .3s ease-in;
}

.selected {
  opacity: 1 !important;
  fill-opacity: 1 !important;
}

.unselected > circle {
  opacity: 0.30;
}

JavaScript

require([
    "esri/map",
    "esri/layers/FeatureLayer",
    "dojo/on",
    "dojo/domReady!"
  ],
  function(
    Map,
    FeatureLayer,
    on
  ) {

    var map = new Map("map", {
      basemap: "hybrid",
      center: [-82.44109, 35.6122],
      zoom: 17
    });

    var featureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0", {
      outFields: ["*"]
    });

    var timer;
    var g;
    var glayerNode;
    var oldRVal;

    map.addLayer(featureLayer);

    on.once(featureLayer, "update-end", function() {
      var docFrag = document.createDocumentFragment();
      var names = featureLayer.graphics.map(function(x) {
        return x.attributes.Condition;
      }).reduce(function(a, b) {
        if (a.indexOf(b) < 0) a.push(b);
        return a;
      }, []).filter(function(x) {
        return x.length > 3;
      }).map(function(name) {
        var btn = document.createElement('button');
        btn.className = "btn-condition";
        btn.innerText = name;
        docFrag.appendChild(btn);
        return name;
      });
      document.getElementById("btns").appendChild(docFrag);

      var btns = document.getElementById('btns');

      on(btns, ".btn-condition:click", function(e) {
        // do a multiselect
        var graphics = featureLayer.graphics;
        var matches = graphics.filter(function(x) {
          return x.attributes.Condition === e.target.innerText;
        });

        var fragment = document.createDocumentFragment();
        if (!matches[0]) {
          return;
        }
        var gnode = matches[0].getNode();
        if (!gnode) {
          return;
        }
        var parent = gnode.parentNode;
        matches
          .map(function(x) {
            var node = x.getNode();
            if (node) {
              node.parentNode.removeChild(node);
              node.setAttribute("class", "selected");
              fragment.appendChild(node);
            }
   ...