shuffle n elements in html list (see the code)

I’m trying to complete this code I have a list of 30 items. I want to show randomly: 2 elements between 1 and 10, 4 between 10 and 20 and 6 between 20 and 30. The code I show can only show the first two elements between 1 and 10…what can I do to show the other elements?

var list = document.getElementById("items"),
newlist = document.getElementById("shuffle");
function shuffle(items)
{
    var cached = items.slice(0,10), temp, i = cached.length, rand;
    while(--i)
    {
        rand = Math.floor(i * Math.random());
        temp = cached[rand];
        cached[rand] = cached[i];
        cached[i] = temp;
    }
    return cached;
}
function shuffleNodes()
{
    var nodes = list.children, i = 0;
    nodes = Array.prototype.slice.call(nodes);
    nodes = shuffle(nodes);
    
    list.innerHTML = "";
  
    while(i < 2)
    {
        list.appendChild(nodes[i]);
        ++i;
    }
}
window.onload = shuffleNodes;
<dl id="items">
    <dd>1. item.<br></dd>
    <dd>2. item.<br></dd>
    <dd>3. item.<br></dd>
    <dd>4. item.<br></dd>
    <dd>5. item.<br></dd>
    <dd>6. item.<br></dd>
    <dd>7. item.<br></dd>
    <dd>8. item.<br></dd>
    <dd>9. item.<br></dd>
    <dd>10. item.<br></dd>
    <dd>11. item.<br></dd>
    <dd>12. item.<br></dd>
    <dd>13. item.<br></dd>
    <dd>14. item.<br></dd>
    <dd>15. item.<br></dd>
    <dd>16. item.<br></dd>
    <dd>17. item.<br></dd>
    <dd>18. item.<br></dd>
    <dd>19. item.<br></dd>
    <dd>20. item.<br></dd>
    <dd>21. item.<br></dd>
    <dd>22. item.<br></dd>
    <dd>23. item.<br></dd>
    <dd>24. item.<br></dd>
    <dd>25. item.<br></dd>
    <dd>26. item.<br></dd>
    <dd>27. item.<br></dd>
    <dd>28. item.<br></dd>
    <dd>29. item.<br></dd>
    <dd>30. item.<br></dd>
</dl>