JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
var total = 0;
$(document).ready(function(){

    $("#btn").click(function(){
    	total++;
      //alert(nom);
        //$("#liste").append("<li></li>");
        //$("#liste li").text("Element " + total);
        
        
        $("#liste").append("<li></li>");
        $("#liste li:last-child").text("Element " + total)
        
        //$("#liste").append("<li>Element " + total +"</li>");
        
        
    });
});
</script>

<body>



<h1>
Ceci est le titre centré horizontalement
</h1>

<button id="btn">nouveau</button>

<div id="table">
  <ol id="liste"> </ol>
</div>

CSS

h1 {
  display:block;
  margin:0 auto;
  text-align:center;
}

<#table {
  display:table;
  margin-left:auto;
  
}
#liste {
  display:block;
  margin: 0 auto;
   margin-top:30px;
}

#btn {
  display:block;
  margin:0 auto;
  margin-top: 30px;
}