Issue duplicates value when I console.log on bootstrap tagsinput

Question

I have an error with Bootstrap Tagsinput as follows, I append an row div when I click 'Add property' button (inside the row there is tagsinput), and then I click 'Show' button to show console.log. But I got an error is console.log show me duplicates value when I have two or more row.

And here is my codepen: https://codepen.io/LinhNT/pen/WNvmygx.

$(document).ready(function () {
    $('.js_add_property').click(function () {
      const wraper = $('#js_add_property_wraper');
      addProperty(wraper);
    });
});

function addProperty(wraper) {
  const template = `<div class="row property-row">
                      <div class="col-md-3">
                        <div class="form-group">
                          <label>Name</label>
                          <input type="text" class="form-control">
                        </div>
                      </div>
                      <div class="col-md-5">
                        <div class="form-group">
                          <label>Tags</label>
                          <input type="text" class="tags-input">
                        </div>
                      </div>
                      <div class="col-md-2">
                        <div class="form-group">
                          <label>Actions</label>
                          <div>
                            <button class="btn btn-primary js_show_data">Show</button>
                            <button class="btn btn-secondary js_remove_row">Remove</button>
                          </div>
                        </div>
                      </div>
                    </div>`;
  
  wraper.append(template);

  $('.tags-input').tagsinput();

  showTableProduct();

  const button = $('.js_remove_row');
  removeRow(button);
}

function removeRow(button) {
  button.click(function () {
    $(this).parents('.property-row').remove();
    $('.tags-input').tagsinput('reset');
    $('.tags-input').tagsinput();
  })
}

function showTableProduct() {
  $('.js_show_data').click(function () {
    const tagInput = $(this).parents('.property-row').find('.tags-input');
    console.log(tagInput.tagsinput('items'))
  })
}

.bootstrap-tagsinput {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.bootstrap-tagsinput input {
    padding: 0;
}

.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}
.label-info {
    background-color: #5bc0de;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
<div class="display-list">
  <div id="js_add_property_wraper"></div>
  <button class="btn btn-primary js_add_property">Add property</button>
</div>

Thank you.

Answer 1

Try to modify your code like this:

$(document).ready(function () {
          $('.js_add_property').click(function () {
            const wraper = $('#js_add_property_wraper');
            addProperty(wraper);
          });



          $(document).on('click','.js_show_data', function(){
            const tagInput = $(this).parent().parent().parent().parent('.property-row').find('.tags-input');
            console.log(tagInput.tagsinput('items'));
          });


        });

        function addProperty(wraper) {
          const template = `<div class="row property-row">
                              <div class="col-md-3">
                                <div class="form-group">
                                  <label>Name</label>
                                  <input type="text" class="form-control">
                                </div>
                              </div>
                              <div class="col-md-5">
                                <div class="form-group">
                                  <label>Tags</label>
                                  <input type="text" class="tags-input">
                                </div>
                              </div>
                              <div class="col-md-2">
                                <div class="form-group">
                                  <label>Actions</label>
                                  <div>
                                    <button class="btn btn-primary js_show_data">Show</button>
                                    <button class="btn btn-secondary js_remove_row">Remove</button>
                                  </div>
                                </div>
                              </div>
                            </div>`;

          wraper.append(template);

          $('.tags-input').tagsinput();

          const button = $('.js_remove_row');
          removeRow(button);
        }

        // showTableProduct();

        function removeRow(button) {
          button.click(function () {
            $(this).parents('.property-row').remove();
            $('.tags-input').tagsinput('reset');
            $('.tags-input').tagsinput();
          })
        }

I also attached the screen which also prooves that in console it shows only clicked button's input value Also updated my pen