JSFiddle - React, Tailwind, and code Playground

HTML

<svg class="connector" style="position:absolute;left:277.5px;top:65px" position="absolute" pointer-events:"none" version="1.1" xmlns="http://www.w3.org/1999/xhtml" height="152.5px" width="410.015625px">
  <path fill="none" stroke="#ff0000" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 149.5 410.015625 149.5" id="path1"></path>
</svg>

<svg style="position:absolute;left:277.5px;top:109px" position="absolute" pointer-events:"none" version="1.1" xmlns="http://www.w3.org/1999/xhtml" height="108.5px" width="410.015625px">
  <path fill="none" stroke="#880000" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 105.5 410.015625 105.5" id="path2"></path>
</svg>

<svg class="connector" style="position:absolute;left:277.5px;top:265px" position="absolute" pointer-events:"none" version="1.1" xmlns="http://www.w3.org/1999/xhtml" height="152.5px" width="410.015625px">
  <path fill="none" stroke="#00ff00" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 149.5 410.015625 149.5" id="path3"></path>

  <path fill="none" stroke="#008800" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 105.5 410.015625 105.5" id="path4"></path>
</svg>

CSS

#path1.hovered, #path2.hovered, #path3.hovered, #path4.hovered {
  stroke: #0000ff;
}

JavaScript

for (var i=1; i<=4; i++) {
  path = $("#path" + i);

  var createMouseEnterHandler = function(path, i) {
      return function() {
        console.log("enter path " + i);
        path.attr("class", "connector hovered");
      };
  };
  path.mouseenter(createMouseEnterHandler(path, i));

  var createMouseLeaveHandler = function(path, i) {
      return function() {
        console.log("enter path " + i);
        path.attr("class", "connector");
      };
  };
  path.mouseleave(createMouseLeaveHandler(path, i));
}