JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
                                    <a data-toggle="collapse" href="#product_list">Product List</a>
                                </h4>
    </div>
    <div id="product_list" class="panel-collapse collapse in input_fields_wrap">
      <div class="panel-group" id="accordion">
        <div class="panel panel-default">

          <div class="panel panel-default product_wrapper">
          </div>

        </div>
      </div>

    </div>
  </div>
</div>

<button class="add_field_button btn btn-primary pull-right">Add More Fields</button>

<br/>
<br/>
<br/>
<br/>

<table class="table table-bordered">

  <tr style="background-color:black; color:white;">

    <th style="width:70%;">
      <input type="text" class="form-control" id="payment_term" placeholder="Type how many terms client want" />
    </th>


    <th style="width:30%;">
      <button class="btn btn-default" id="add_payment_terms">Add</button>
    </th>

  </tr>

</table>

<div id="payment_term_area">

  <h2>Payment Terms</h2>

  <div class="payment_term_wrapper" style="padding:0; margin:0;">

    <table class="table table-bordered" style="width:95%;">


      <tr style="background-color:black; color:white;" class="payment_term_wrapper">

      </tr>

    </table>

  </div>

</div>

JavaScript

$(document).ready(function() {

  //dynamic create mutiple inputbox
  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID

  var x = 0; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      //$(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
      $(wrapper).append(

        '<div class="panel panel-default product_wrapper">' +
        '<div class="panel-heading">' +
        '<h4 class="panel-title">' +
        '<a data-toggle="collapse" data-parent="#accordion" href="#product' + x + '">Product' + x + '</a>' +
        '</h4>' +
        '</div>' +

        '<div id="product' + x + '" class="panel-collapse collapse in">' +
        '<div class="panel-group">' +
        '<div class="panel panel-default">' +

        '<div class="col-lg-12">' +

        '<div class="col-lg-3" >' +
        '<label>Product</label>' +
        '<textarea type="text" class="product_textarea" name="Product[]"></textarea>' +
        '</div>' +

        '<div class="col-lg-6">' +
        '<label>Description</label>' +
        '<textarea rows="5"  name="ProductDescription[]"></textarea>' +
        '</div>' +

        '<div class="col-lg-2 form-group">' +
        '<label>Price</label>' +
        '<input type="text" class="price_tag form-control" name="Price[]"/>' +
        '</div>' +

        '</div>' +

        '</div>' +
        '</div>' +

        '</div>' +
        '<a href="#" class="remove_field btn btn-danger pull-right">cancel</a>' +
        '</div>'

      );

      //textarea auto expand

      $(wrapper).children(':last').find('textarea').each(function() {
        this.setAttribute('style', 'height:' + (this.scrollHeight) +...