Insert node with the text of the clicked label

Question

I have this section of code for an eCommerce.

function appendChildElement() {
    var labelOptionSelected = $("#filters fieldset label");
    labelOptionSelected.each(function() {
      labelOptionSelected.click(function() {
        setTimeout(function() {
          if ($(labelOptionSelected).hasClass('sr_selected')) {
            const text = $('.sr_selected').text();
            const insertNode = document.querySelector(".fg-container--filterSelected");
                  insertNode.innerHTML = "<a href='#' onclick='' class='fg-container--filterSelected-option'>" + text + " x</a>";
          }
        }, 500);
      });
    });
  }
  appendChildElement();

What I require is that each <label> clicked, copy the text of said <label> and insert it in a specific link.

That means that if I click on the <label 1>, copy the text of this <label> and create a link with the text and if I click on the <label 2> copy the text of this < label> and put it in another additional link.

I put the example of the code as it is currently working

<div class="container">
    <!-- Here the links of the clicked labels would be created -->
    <a href='#' onclick='removeThisFilter()' class='fg-container--filterSelected-option'>Clicked label 1Clicked label 2Clicked label 3Clicked label 4</a>
<div>
<fieldset>
    <label class="00001" title="00001" index="0">Category Name 1</label>
    <label class="00002" title="00002" index="1">Category Name 2</label>
    <label class="00003" title="00003" index="2">Category Name 3</label>
    <label class="00004" title="00004" index="3">Category Name 4</label>
</fieldset>

Currently the code works but not correctly, if I click on label 1, it adds the link with the text, but if I additionally click on label 2, it adds the text but within the same initial link. And what is required to be in a separate link within the same <div> resulting in something like this:

<div class="container">
    <a href='#' onclick='removeThisFilter()' class='fg-container--filterSelected-option'>Clicked label 1</a>
    <a href='#' onclick='removeThisFilter()' class='fg-container--filterSelected-option'>Clicked label 2</a>
    <a href='#' onclick='removeThisFilter()' class='fg-container--filterSelected-option'>Clicked label 3</a>
<div>
<fieldset>
    <label class="00001" title="00001" index="0">Category Name 1</label>
    <label class="00002" title="00002" index="1">Category Name 2</label>
    <label class="00003" title="00003" index="2">Category Name 3</label>
    <label class="00004" title="00004" index="3">Category Name 4</label>
</fieldset>

The functionality is basically for a category filter in the PDP of a page.

Annex mockup of what they request, maybe and they will understand me better with the image

Mockup

Tell me that you can help me please, I have looked in several parts but I can not find the solution.

Beforehand thank you very much

Answer 1

Well, not sure if this was what you were after, but I simplified your code, made it so you can't add the same link twice and added a way for you to remove the links as well. Also, since you tagged this as jquery, I made it all jquery

$("#filters fieldset label").click(function() {
  let t = $(this).text().trim();
  let newlink = `<a href='#' onclick='removeMe(this)' class='fg-container--filterSelected-option' data-val="${t}">${t}</a>`;
  let exists = $(`.container a[data-val="${t}"]`).length > 0;
  if (!exists) $('.container').append(newlink)
});

function removeMe(el) {
  $(el).remove();
}

.container a,
label {
  display: block;
  margin: 2px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='filters'>
  <div class="container">
    <!-- Here the links of the clicked labels would be created -->
    <div>
      <fieldset>
        <label class="00001" title="00001" index="0">Category Name 1</label>
        <label class="00002" title="00002" index="1">Category Name 2</label>
        <label class="00003" title="00003" index="2">Category Name 3</label>
        <label class="00004" title="00004" index="3">Category Name 4</label>
      </fieldset>
    </div>