引导程序模态中的选项卡不会更改其内容

Question

我对模式和选项卡有疑问。我创建了2个模式，一个添加新内容，另一个编辑这些内容。模态内部有3个选项卡来组织内容。当我打开第一个模态时，一切正常，但是当我打开第二个模态时，当我按选项卡时，内容不会改变，而是停留在第一个模态上。 我附上代码，希望有人可以帮助我找到解决方案 预先谢谢你

Valerio

<!-- Modal NEW -->
{{-- <div class="modal fade" id="newTec" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1" aria-hidden="true"> --}}
<div class="modal fade" id="newTec">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header" style="border-bottom: 0px; padding-bottom: 0px;">
        <h5 class="modal-title" id="titleModalE"><i class="fas fa-user-plus fa-3x"></i> New technician</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <ul class="nav nav-tabs" id="myTab-new" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="profile-tab-new" data-toggle="tab" href="#profile" role="tab" aria-controls="profile-new" aria-selected="true">Profile</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="managment-tab-new" data-toggle="tab" href="#managment" role="tab" aria-controls="managment-new" aria-selected="false">Managment</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="certificate-tab-new" data-toggle="tab" href="#certificate" role="tab" aria-controls="certificate-new" aria-selected="false">Certifications</a>
          </li>
        </ul>
        <form action="{{route('category.store')}}" method="post" >
          {{csrf_field()}}

          @include('category.form')

        <div class="modal-footer">
          <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Save</button>
        </div>
        </form>
      </div><!-- close modal-body -->
    </div><!-- close modal-content -->
  </div><!-- close modal-dialog -->
</div><!-- close modal -->



<!-- Modal EDIT -->
{{-- <div class="modal fade" id="newTec" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1" aria-hidden="true"> --}}
<div class="modal fade" id="editTec">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header" style="border-bottom: 0px; padding-bottom: 0px;">
        <h5 class="modal-title" id="titleModalE"><i class="fas fa-user-plus fa-3x"></i> Edit technician</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <ul class="nav nav-tabs" id="myTab-edit" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="profile-tab-edit" data-toggle="tab" href="#profile" role="tab" aria-controls="profile-edit" aria-selected="true">Profile</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="managment-tab-edit" data-toggle="tab" href="#managment" role="tab" aria-controls="managment-edit" aria-selected="false">Managment</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="certificate-tab-edit" data-toggle="tab" href="#certificate" role="tab" aria-controls="certificate-edit" aria-selected="false">Certifications</a>
          </li>
        </ul>
        <form action="{{route('category.store')}}" method="post" >
          {{csrf_field()}}

          @include('category.form')

        <div class="modal-footer">
          <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Save</button>
        </div>
        </form>
      </div><!-- close modal-body -->
    </div><!-- close modal-content -->
  </div><!-- close modal-dialog -->
</div><!-- close modal -->

我以这种方式触发编辑模式：

$(document).ready(function(){

  $('#editTec').on('show.bs.modal', function (event) {

    console.log('test');
    var button = $(event.relatedTarget)

    var lastname = button.data('mylastname')
    var name = button.data('myname')
    var address = button.data('myaddress')
    var city = button.data('mycity')
    var phone = button.data('myphone')
    var email = button.data('myemail')
    var enpals = button.data('myenpals')
    var vat = button.data('myvat')
    var basicCost = button.data('mybasicCost')

    var cat_id = button.data('catid')

    var modal = $(this)

    modal.find('.modal-body input#lastname').val(lastname);
    modal.find('.modal-body input#name').val(name);
    modal.find('.modal-body input#address').val(address);
    modal.find('.modal-body input#city').val(city);
    modal.find('.modal-body input#phone').val(phone);
    modal.find('.modal-body input#email').val(email);
    modal.find('.modal-body input#enpals').val(enpals);
    modal.find('.modal-body input#vat').val(vat);
    modal.find('.modal-body input#basicCost').val(basicCost);

    modal.find('.modal-body input#cat_id').val(cat_id)

  })
});
</script>