多次运行循环

Question

我正在开发一个简单的应用，该应用在点击时显示随机数，并在生成后在列表中显示结果。

我想做的是从用户输入中创建一些循环基数。

例如我输入5，它将显示5组随机数

2 3 3 2 1

4 1 2 3 4

3 4 5 1 6

1 9 22 45 5

1 33 22 11 2

结果显示也一一显示。

最终结果类似于this

我尝试了间隔但没有用。
希望你理解我。

$('input').val(1);
$('button').click(function() {
  for (let i = 0; i < 5; i++) {
    var lotto = [];
    var results = [];
    setTimeout(function() {
      var r = Math.floor(Math.random() * 50) + 1;
      lotto.push(r);

      setTimeout(function() {
        $('ul li:nth-child(' + (i + 1) + ')').text(lotto[i]);
      }, 200);
      if (lotto.length == 5) {
        results.push(lotto);
        setTimeout(function() {
          for (let x = 0; x < results.length; x++) {
            $('.results').append('<li>' + results[x] + '</li>');
          }
        }, 500);
      }
    }, 500 * i);
  }
});

ul li{
  list-style-type: none;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<input type="text"><button>Display</button>

<ul class="results"></ul>