Concatenate form inputs with raw HTML that appends to

I'm trying to make an email builder for my job. I have an accordion with multiple form inputs per accordion(they are all hidden) then used jQuery to clone and append the different accordion forms when a the associated button is pressed.

$(document).ready(function() {
  //Clones the Main feature code, adds it to the bottom of the Accordion and changes display to "Show"
  $("#btn1").click(function() {
    $(".main_feature").first().clone(true, true).appendTo("#accordion").show();
  });
  //Clones the Sub-Feature code, adds it to the bottom of the Accordion and changes display to "Show"
  $("#btn2").click(function() {
    $(".sub_feature").first().clone(true, true).appendTo("#accordion").show();
  });
  //Clones the Banner code, adds it to the bottom of the Accordion and changes display to "Show"
  $("#btn3").click(function() {
    $(".banner").first().clone(true, true).appendTo("#accordion").show();
  });
  $("#btn4").click(function() {
    $(".text").append($("#main").val());

  });
});

<!--Start of Accordion Block-->

<div id="accordion" style="display: inline-block; background-color:#DCDCDC; padding: 10px 5px; min-width: 640px">

  <!--Main Feature Accordion-->

  <div style="display: none" class="s_panel main_feature">
    <button class="remove-btn" style="float: right; margin-top: 10px; margin-right:5px">X</button>
    <h3 style="background-color: lightgoldenrodyellow; padding: 10px;">Main Feature</h3>
    <div style="padding: 20px 0px;background-color:cadetblue">

      <!--Main Feature Form-->

      <div class="form-input">
        <form action="" method="get" class="form-example">
          <div class="form-example">
            <label for="style">Style: </label>
            <input type="text" name="main_style" id="main_style" required/>
          </div>
          <div class="form-example">
            <label for="link">Image Link: </label>
            <input type="text" name="main_img_link" id="main_img_link" required/>
          </div>
          <div class="form-example">
            <label for="link">Web Link: </label>
            <input type="text" name="main_web_link" id="main_web_link" required>
          </div>
          <div class="form-example">
            <label for="price">Price: </label>
            <input type="text" name="main_price" id="main_price" required>
          </div>
          <div class="form-example">
            <label for="description">Description: </label>
            <input type="text" name="main_description" id="main_description" required>
          </div>
        </form>
      </div>
    </div>
  </div>

(This isn't the complete code but I will attach my github link)

Here is what I need help with:

I need to be able to take all the accordion forms and their inputs and concatenate them into the raw HTML that makes up the email.

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="padding: 20px 0px;">
   <tr>
        <td class="fluid-img" style="font-size: 12px; border: 1px solid #e1e1e1; background-color: #f5f5f5;">
             <a href="www.google.com?utm_source=<!--Date Code-->&utm_medium=email&utm_campaign=<!--Date Code-->">
             <!-- Main Feature Image - Transparent PNG -->
             <img src="https://image.shutterstock.com/image-vector/colorful-illustration-test-word-260nw-1438324490.jpg" width="100%" border="0" alt="Style Number" />
             </a>
        </td>
   </tr> 
</table>

I've tried using template literals but couldn't get it to append at all to the

I was using as the target.

I apologize for this being confusing.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/XAiNQ1h