title: How to add a class to a svg path?
body: <p>First I am checking if the clicked button parent has the same class of a given path, then if the path class matches the parent clicked button class, it should be adding a class to the path itself.</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li class="modern"&gt;
     &lt;button&gt;Ex 1&lt;/button&gt;
    &lt;/li&gt;
    &lt;li class="classic"&gt;
     &lt;button&gt;Ex 2&lt;/button&gt;
    &lt;/li&gt;
  &lt;ul&gt;
  
  &lt;svg&gt;
    &lt;path class="modern"&gt;&lt;/path&gt;
    &lt;path class="classic"&gt;&lt;/path&gt;
  &lt;/svg&gt;
  
  $("button").on("click", function() {
      var periodClass = $(this).parent().attr("class");
      $("svg path").each(function() {
          $("svg path").not('.'+periodClass).removeClass("active");
          $('svg path.'+periodClass).target.classList.add('active');
      });
  });
  </code></pre>
  
  <p>Also tried</p>
  
  <pre><code>$('svg path.'+periodClass).addClass('active');
  </code></pre>