How to fix the script conflict in the modal window and on the website?

Question

Laravel

The situation is this. There is a site in which it is necessary to load modal windows when clicking on the "details" button. Inside this window, it should be possible to subscribe to the site with a choice of options for which script files are responsible. So, when scripts are connected directly to the modal window on the page itself, the script stops working, and also after closing the modal window, the next time you try to call it, the error " TokenMismatchException in VerifyCsrfToken.php line 68: " (in Network - firebug) occurs. If the code is removed from the modal window, then they load correctly, the main page also, but inside the modal window it is impossible to control some elements due to the lack of a script.
Part of the code responsible for loading the modal:

this.getExternalData = function(href, toOpen, method, options) {
    var toOpen = toOpen,
      data = options ? options : {};

    $.ajax({
      url: href,
      type: method ? method : 'post',
      data: data,
      dataType: 'json',
      beforeSend: function() {
        self.showPreloader();
      },
      success: function(data) {
        $('#' + toOpen + ' .modalContent').html(data.content);
        if(data.header)
          $('#' + toOpen + ' .modalHeader').html(data.header);
        setTimeout(function() {
          self.openModal(toOpen);
          $.event.trigger('ajaxModalLoaded', toOpen);
        }, 300);
      },
      complete: function() {
        self.closePreloader();
      }
    });
  }

The full code is here: test.dekoracio.by/public/js/script.js
The code that calls the modal:

<a href="{{ route('ajax.logic', ['method' => 'getVebinar', 'param' => $vebinar->id]) }}" data-modal="lecturerModal" class="elem openModal vebinat-about_popup__link vebinat-about_popup__detail-link">подробнее</a>

modal code:

<p class="modalClose"  style="position:  absolute;right: 34px;font-size: 40px;cursor: pointer;">X</p>
<div class="container">
    <div class="row">
        <h1>вебинар</h1>
        <div class="vebinat-about-inner">
            @include('partials.bottomOrderFormAdditional')
            <div class="vebinat-about-info">
                <div class="teacher-info">
                    <img class="teacher-info_photo" src="/img/{{$model->lecturer_ws->image}}" alt="">
                    <div class="teacher-info-inner">
                        <p class="teacher-info_name">{{$model->lecturer_ws->name}}</p>
                        <p class="teacher-info_spec">Специализация: <span>{{$model->lecturer_ws->specialisation}} Преподавательский стаж: {{$model->lecturer_ws->experience}}</span></p>
                        <ul class="teacher-info_titul">
                          @if(!empty($model->lecturer_ws->description))
                            <li><span>•</span>{{$model->lecturer_ws->description}}</li>
                          @endif
                          @if(!empty($model->lecturer_ws->description2))
                            <li><span>•</span>{{$model->lecturer_ws->description2}}</li>
                          @endif
                          @if(!empty($model->lecturer_ws->description3))
                            <li><span>•</span>{{$model->lecturer_ws->description3}}</li>
                          @endif
                        </ul>
                    </div>
                </div>
                <div class="vebinar_detail-info">
                    <div class="vebinar_detail-info_head-block">
                        <div class="date">23 января 2018</div>
                        <div class="price">ВРЕМЯ: <span>{{$model->duration}}, {{$model->hours}} <i class="far fa-clock"></i></span></div>
                    </div>
                    <div class="vebinar_detail-info-inner">
                        <h3>Программа мероприятия</h3>
                        <h4 class="vebinar_detail-info_head">{{$model->title}}</h4>
                        <p class="vebinar_detail-info_text">{{$model->description}}</p>

                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

The site itself is located here test.dekoracio.by (Webinars block).

Answer 1

Read about csrf here

<meta name="csrf-token" content="{{ csrf_token() }}">
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

and then POST - requests will be without error

Answer 2

one.

script stops working

is not a diagnosis. it `s Magic.
2.

selection of options for which script files are responsible

- what kind of files? when are they uploading? maybe there are events on elements that appear on the page only after loading the modal window?
3. Use POST requests only to change data. To display content - GET.
4. TokenMismatchException - csrf-token must be passed with POST request

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
})

6. Make a page that displays the content of the modal window and sends data without ajax. Make sure it works.
7. Forget about jquery - use vuejs.