Добавить и удалить «таблицу» в определенной части HTML

Question

Я работаю над своим кодом еще 3 часа, чтобы добиться добавления / удаления HTML поверх Javascript.Но даже этого я не смог.Я нашел некоторые решения в Интернете, но они намного проще, например, добавление текста в конце раздела.

В моем случае я хотел бы добавить элемент таблицы в определенной частиHTML, и удалите этот элемент таблицы, если нажата кнопка «Удалить».

Надеюсь, вы мне поможете.

Вот мой HTML:

<div class="col-xl border-left border-dark">
          <div class="row">
            <div class="col-md-12">

            <!-- *** Table number 1 *** --> 
              <table class="table table-bordered">
                <!-- MORE HTML CODE -->
                <a class="btn" role="button" id="JS_ADD_THIS_ENTRY">Add HTML below...</a>
              </table>
            <!-- *** Table number 1 *** --> 

<!-- ********** INPUT FROM Javascript, if clicking on ADD ********** -->

      <!-- this templated below should be appended here after clicking on ADD button -->

              <table class="JS_ADD_THIS_ENTRY table table-bordered">
                <div class="row">
                  <div class="col-auto justify-content-around d-flex flex-column border">
                    <a class="JS_REMOVE_THIS_ENTRY btn btn-danger" role="button">Remove</a>
                  </div>
                  <div class="col border">
                    <B>Title</B><br />
                    <hr class="my-1">
                    Name
                  </div>
                </div>
              </table>

<!-- ********** INPUT FROM Javascript, if clicking on ADD ********** -->            
            <!-- *** Table number 3 *** --> 
              <table class="table table-bordered">
                <!-- MORE HTML CODE -->
              </table>
            <!-- *** Table number 3 *** --> 

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

Вот мой JS:

$(document).ready(function () {
    var counter = 0;

    $("#JS_ADD_THIS_ENTRY").on("click", function () {
        var newEntryRow = $("<table>");
        var buildHTML = "";

        buildHTML += '<table class="YT_URL_AddRow_Element table table-bordered id="' + counter '">';
        buildHTML += '<div class="row">';
        buildHTML += '<div class="col-auto justify-content-around d-flex flex-column border">';
        buildHTML += '<a class="btn btn-danger" role="button">Remove</a>';
        buildHTML += '</div>';
        buildHTML += '<div class="col border">';
        buildHTML += '<B>Title</B><br />';
        buildHTML += '<hr class="my-1">';
        buildHTML += 'Name';
        buildHTML += '</div>';
        buildHTML += '</div>';
        buildHTML += '</table>';


        newEntryRow.append(buildHTML);
        $("table.table-bordered").append(newEntryRow);
        counter++;
    });

    $("table.table-bordered").on("click", ".JS_REMOVE_THIS_ENTRY", function (event) {
        $(this).closest("table").remove();       
        counter -= 1
    });
});