JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<div class="form-group" data-values-fields="true" style="/*display: none*/">
        <label for="">Варианты значений</label>
        <div class="row" field-value-area>

        </div>
        <div class="row">
            <div class="col-lg-12">
                <a onclick="onClickAddFieldValue()" class="btn btn-sm btn-link">Добавить значение</a>
            </div>
        </div>
    </div>

JavaScript

function onClickAddFieldValue() {
  let n = $('[data-input-block]:last').data('input-block');
  n = n && n == +n ? n + 1 : 1;

  let emptyFieldValue = '<div class="row" data-input-block="' + n + '"><div class="col-lg-4" data-input-key></div><div data-input-value class="col-lg-4"></div><div class="col-lg-4"><a onclick="onClickDeleteFieldValue(' + n + ')" class="btn btn-sm btn-link">Удалить значение</a></div></div>';
  let key = '<input type="text" value="" name="key[' + n + ']">';
  let value = '<input type="text" value="" name="value[' + n + ']">';

  $('[field-value-area]').append(emptyFieldValue);
  $('[data-input-block="' + n + '"] [data-input-key]').html(key);
  $('[data-input-block="' + n + '"] [data-input-value]').html(value);
}

function onClickDeleteFieldValue(n) {
  $('[data-input-block="' + n + '"]').remove();
}

function toggleValues() {
  var val = $('[data-lead-property="type"]').val();
  var valueFields = $('[data-values-fields="true"]')
  if (val === 'choices' || val === 'radio' || val === 'select') {
    valueFields.show()
  } else {
    valueFields.hide()
    $( '[field-value-area]' ).html('');
  }

}