JSFiddle - React, Tailwind, and code Playground

HTML

<div class="left"><h1>↓ 以前のもの</h1>
    リスト1つ目
<ol>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
</ol>
リスト2つ目
<ol>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
</ol>
</div>
<div class="left">
<h1>↓ 改正版</h1>
    リスト1つ目
<ul>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
</ul>
リスト2つ目
<ul>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
</ul>
</div>

CSS

.number{
    color:red;
    display:inline-block;
    margin-right:15px;
    font-size:20px;
}
ol,ul{margin:10px;}
li{margin-bottom:5px;}
h1{margin:10px;}
div{width:30%;}
.left{float:left;}

JavaScript

$("ol li").each(function (i) {
        i = i+1;
        $(this).prepend('<span class="number"> No.'+i+'</span>');
   });


$('ul > li').each(function() {
    $(this).prepend("<span class='number'> No." + ($(this).index() +1) + "</span>");
});