如何使用javascript动态生成html元素

Question

我正在尝试动态生成带有javascript的div。我的意思是：在第一个div中会有一个带有.click事件的按钮，当它被点击时我想要生成一个新的div。在新div中，必须有另一个带有.click事件的按钮，它将作为第一个按钮。我的问题是，在生成的div中，该按钮不会创建新的div。

这是我的js功能：

$(function() {
        $('#openFirstTab').click(function(){
            var newDiv = $('<div class="col s4 bordered"><h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5><button id="openSecondTab">Add Div</button></div>');
          $('.row').append(newDiv);
        });
        $('#openSecondTab').click(function(){
            var newDiv = $('<div class="col s5 bordered"><h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5><button id="openSecondTab">Add Div</button></div>');
          $('.row').append(newDiv);
        });
    });

和HTML：

<div class="custom_container-full-width">
    <div class="row">
      <h1 class="header center orange-text">Starter Template</h1>

      <div class="col s3 bordered">  
        <h5 class="header col s12 light">A modern responsive front-end 
             framework based on Material Design</h5>
        <button id="openFirstTab">Add Div</button>
      </div>
    </div>  
  </div>