Hover on a particular dash of a stroke

let paths = Array.from(document.querySelectorAll("#progress-circle .small"));
paths.forEach(function(path) {
  path.addEventListener('mouseover', function (event) {
    var target = event.target || event.srcElement;
    target.setAttribute('style', 'stroke: blue');
    document.getElementById('percentValue').textContent = target.dataset.percent;
    
    paths.forEach(function(previousPath) {
     if (parseInt(previousPath.dataset.percent) <= parseInt(target.dataset.percent)) 
     {
        previousPath.setAttribute('style', 'stroke: blue');
     } else {
        previousPath.setAttribute('style', 'stroke: grey');
     }
    });
  });
});

    * {
    }

    .progress-ring__circle {
      stroke-dasharray: 25 6;
    }

    .progress-ring__circle:hover {
      stroke-dasharray: 25 6;
    }

    .progress-ring__circle:nth-child(2){
        stroke: #f00; 
        position: relative;
        z-index: 1;

        
        
    }

<svg style="stroke:black; fill:none; stroke-width:2" width="400" height="400" id="progress-circle">
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="1"
        d=" M 236 105 A 100 100 288 0 1 279 133" />
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="2"
        d=" M 286 141 A 100 100 324 0 1 304 190" />
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="3"
        d=" M 305 200 A 100 100 0 0 1 292 250" />
     <path  
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="4"
        d=" M 286 259 A 100 100 36 0 1 246 291" />
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="5"
        d=" M 236 295 A 100 100 72 0 1 184 298" />
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="6"
        d=" M 174 295 A 100 100 108 0 1 131 267" />
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="7"
        d=" M 124 259 A 100 100 144 0 1 106 210" />
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="8"
        d=" M 105 200 A 100 100 180 0 1 118 150" />
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="9"
        d=" M 124 141 A 100 100 216 0 1 164 109" />
     <path 
        class="small"
        stroke="grey"
        stroke-width="10" 
        data-percent="10"
        d=" M 174 105 A 100 100 252 0 1 226 102" />
</path>
<text id="percentValue" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">0</text>    
 </svg>