JSFiddle - React, Tailwind, and code Playground

HTML

<li><a href="#"><span>1</span></a></li>
    <li><a href="#"><span>2 markk</span></a></li>

    <li><a href="#"><span>3</span></a></li>
    <li><a href="#"><span>4 markk</span></a></li>

    <li><a href="#"><span>5</span></a></li>
    <li><a href="#"><span>6 markk</span></a></li>

    <li><a href="#"><span>7</span></a></li>
    <li><a href="#"><span>8 markk</span></a></li>
 

    <li><a href="#"><span>9</span></a></li>
    <li><a href="#"><span>10 markk</span></a></li>

    <li><a href="#"><span>11</span></a></li>
    <li><a href="#"><span>22 markk</span></a></li>

<li><a href="#"><span>5</span></a></li>
    <li><a href="#"><span>6 markk</span></a></li>

    <li><a href="#"><span>7</span></a></li>
    <li><a href="#"><span>8 markk</span></a></li>
 

    <li><a href="#"><span>9</span></a></li>
    <li><a href="#"><span>10 markk</span></a></li>

    <li><a href="#"><span>11</span></a></li>
    <li><a href="#"><span>22 markk</span></a></li>
 
 

    <li>... 28 mores </li>

CSS

[class^=ui]{
    
    border:2px solid red
}

JavaScript

var liLength=$("li").length;
for(var i=0;i<liLength;i=i+10){
     $("li:eq("+i+"),li:gt("+i+"):lt("+(i+9)+")").wrapAll( "<div class=ui"+(i/10)+" />");
}