JSFiddle - React, Tailwind, and code Playground

by Andrey Aires

JavaScript

if(document.getElementById('portabilidadeNumeros') !== null) {
  let input = document.getElementById('portabilidadeNumeros');

  insignia(input, {
    deletion: true,
    delimiter: ',',
    getText: function (value) {
      return value.replace(/\D/g, '');
    }
  });
  const listaNumeros = () => {
    const numeros = document.querySelectorAll('.nsg-tags > .nsg-valid');
    return [...numeros].map(numero => numero.innerText);
  };
  //on select change, show cnpj input
  const select = document.getElementById('portabilidadeTipoCliente');
  const cnpjFields = document.getElementById('cnpjFields');
  cnpjFields.classList.add('d-none');

  select.addEventListener('change', function () {
    const selectValue = select.value;
    if (selectValue === '2') {
      cnpjFields.classList.remove('d-none');
    } else {
      cnpjFields.classList.add('d-none');
    }
  });

  //on select field with id portabilidadeTipoPortabilidade and change it to value 2
  //hide the div with class nsg-editor
  const selectPortabilidade = document.getElementById('portabilidadeTipoPortabilidade');
  const nsgEditor = document.querySelector('.portabilidade-did-numeros');
  nsgEditor.classList.add('d-none');
  //create a new div with class portabilidade-did-range and append next to the div with class nsg-editor
  const portabilidadeDidRange = document.createElement('div');
  portabilidadeDidRange.classList.add('portabilidade-did-range', 'd-none', 'mb-3', 'row');
  portabilidadeDidRange.innerHTML = `
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text" id="">Faixa de DIDs</span>
    </div>
      <input id="rangeInitial" type="text" class="form-control" placeholder="DID Inicial">
      <input id="rangeFinal" type="text" class="form-control" placeholder="DID Final">
    <div class="input-group-append">
      <button class="btn btn-outline-secondary" type="button">+</button>
    </div>
  </div>
  <div class="range-table">
    <table class="table...