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>