jQ append 添加html 及字符串拼接

如圖，我要拼接這樣一段html:

點擊下邊添加按鈕，不斷添加這段Html

html:

<div class="x_addtable">
   <div class="x_zs_btn tr mt10">
         <button type="button" class="btn btn-sm f14 x_btn" id="x_btn">+</button>
         <button type="button" class="btn btn-sm f14 x_btn" id="x_btn1">-</button>
    </div>

</div>

js:
<sctipt>
//追加報告表單
   $('.x_zs_btn button#x_btn').on('click',function(){
        var htmladd="";
        htmladd +='<div class="x_add_details mb20">';
        htmladd +='<input class="form-control mb20" type="text"  placeholder="請輸入標題">';
        htmladd +=' <textarea name="" id="" rows="3" placeholder="請輸入內容"></textarea>';
        htmladd +=' </div>';
        $(".x_addtable").append(htmladd);
        $('.x_zs_btn button#x_btn1').show()
    })
</script>