select.js

  on(btns, ".btn-condition:click", function(e) {
    // do a multiselect
    var graphics = featureLayer.graphics;
    // find the graphics that match my query
    var matches = graphics.filter(function(x) {
      return x.attributes.Condition === e.target.innerText;
    });
    // make sure you have results
    if (!matches[0]) {
      return;
    }
    var gnode = matches[0].getNode();
    if (!gnode) {
      return;
    }
    // keep a document fragment on hand
    var fragment = document.createDocumentFragment();
    // save the parentNode, same for all graphics
    var parent = gnode.parentNode;
    matches
      .map(function(x) {
        var node = x.getNode();
        if (node) {
          // removing and adding the node, brings it to the top
          node.parentNode.removeChild(node);
          node.setAttribute("class", "selected");
          fragment.appendChild(node);
        }
      });
    parent.appendChild(fragment);

    function update() {
      glayerNode = featureLayer.getNode();
      glayerNode.setAttribute("class", "unselected");
      // small timeout then reset the css of everything
      setTimeout(function() {
        matches.map(function(x) {
          var node = x.getNode();
          if (node) {
            node.setAttribute("class", "");
          }
        });
        glayerNode.setAttribute("class", "");
      }, 1000);
    };
    // on the next frame let's update the css
    requestAnimationFrame(update);
  });