null

var filterTableNum = 0;
$('.add-table').click(add_empty_table);
$(document).on('click', '.btwn-table', add_table_between);

function create_table() {
    const originTable = document.getElementById('source-table');
    let newTable = originTable.cloneNode(true);
    newTable.id = 'source' + ++filterTableNum;
    newTable.querySelectorAll('input').forEach((element) => {
        element.value = '';
    });
    $(newTable).find('.component-id').val(newTable.id);
    return $(newTable);
}

function add_empty_table() {
    let newTable = create_table();
    $('#main-div').append(newTable);
}

function add_table_between(e){
    let newTable = create_table();
    let originTable = $(e.target.closest('table'));
    newTable.insertAfter(originTable);
}

#container>table{
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="add-table">
        Add Table
      </button>
<div id="container">     
<table
          id="source-table"
          data-component-type="Source"
          class="component-base table table-responsive table-striped rounded"
        >
          <thead class="thead-dark">
            <tr>
              <th colspan="6" class="text-center">
                <span>Source : </span
                ><input
                  id="id"
                  type="text"
                  name="id"
                  placeholder="id"
                  class="component-id form-control-head"
                />
                <button
                  class="delete-component btn btn-danger"
                  style="margin: 1%;"
                >
                  Delete Table
                </button>
              </th>
            </tr>

            <tr>
              <th scope="row">Type</th>
              <th scope="row">Name</th>
             
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <input
                  id="type"
                  type="text"
                  name="type"
                  class="form-control"
                  placeholder="Type"
                />
              </td>
              <td>
                <input
                  id="Name"
                  type="text"
                  name="name"
                  class="form-control"
                  placeholder="Name"
                />
              </td>
            </tr>
          </tbody>
          <tfoot>    
            <tr>
            <td>
            <button class="btwn-table">Add Table Here</button>
           
            </td>
          </tr>
        </table>
        
 <div class="main-div" id="main-div"></div>