使添加和删除元素唯一

Question

我想让我的添加和删除组件独一无二。因此，如果我多次使用它，它就不会触发相同的功能。

我尝试重复代码并为其提供唯一的ID但仍然无法正常工作。

我已经读过这个可以使用$(this).toggleClass来完成，但是使用当前的代码我不知道如何完成它，而不是完全重写。

是否有更简单的方法，或者我们正在考虑完全重写？

＆＃13;

＆＃13;

const form = {
  // Elements
  $buttonAdd: $('#js-form-add'),
  $buttonRemove: $('#js-form-remove'),
  $container: $('.js-provide-url'),
  $formItem: $('.js-form-item'),
  $lastFormItem: $('.js-form-item:last'),

  // Markup
  baseFormItem: $('.js-form-item:first').html(),


  // Strings
  formItemClass: 'js-form-item',

  // Functions
  init() {
    this.events();
  },

  // Bind events such as click
  // We need to use .bind(this) so 'this' retains the scope of the object and not the window
  events() {
    this.$buttonAdd.on('click', this.addNewItem.bind(this));
    this.$buttonRemove.on('click', this.removeLastItem.bind(this));
  },

  // Add a new form item
  addNewItem() {
    let className = `${this.formItemClass} ${this.formItemClass}-${this.getFormItemQuantity()}`;
    let newFormItem = `<div class="${className}">${this.baseFormItem}</div>`;
    $(newFormItem).appendTo(this.$container);
  },

  // Remove the last form item
  removeLastItem() {
    if (this.getFormItemQuantity() > 1) {
      $('.js-form-item:last').remove();
    }
  },

  // Get the number of form items
  getFormItemQuantity() {
    return $('.js-form-item').length;
  }
}

// Initialise the form object by running the init/initialise function
form.init();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="js-provide-url">
  <div class="js-form-item" aria-controls="url-add">
    <label for="js-provide-url" class="form-item__label">Please provide page content (copy, images, vidoes etc.)</label>
    <input type="text" name="provide-url" class="form-item__control" required>
  </div>
</fieldset>
<div class="btn--add" id="js-form-add">Add</div>
<div class="btn--remove" id="js-form-remove">Remove</div>

＆＃13;

＆＃13;

＆＃13;