Javascript-форум - Применить скрипт к не созданному элементу DOM

Суть проблемы вот в чем, при нажатии на "первую" кнопку, с помощью jquery создается еще одна "вторая" кнопка, но теперь мне надо что бы при нажатии на эту "вторую" кнопку создавалась "третья" кнопка. Код прилагается.

Html файл.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="script1.js"></script>
  <script src="script2.js"></script>
</head>

<body>
  <button class="first">Первая кнопка</button>
</body>

</html>

Первый файл JS.

$(document).ready(function(){
  $(".first").click(function(){
    $("body").append("<button class=\"second\">Вторая кнопка</button>");
  });
});

Второй файл JS.

$(document).ready(function(){
  $(".second").click(function(){
    $("body").append("<button class=\"third\">Третья кнопка</button>");
  });
});