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>");
    });
  });

</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 {}

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

ol {
  counter-reset: ollis;
  display: table;
  margin: 1em auto;
  padding: 0;
}

li {
  counter-increment: ollis;
  list-style-position: inside;
}

li:before {
  content: 'element 'counter(ollis);
}