How to output multiple Blade blocks with the same template?

Question

Laravel

There is a modal.blade.php with a modal window template from bootstrap 4.

<div id="@yield('modal_id')" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog @yield('modal_dialog_styles') modal-dialog-centered" role="document">
    <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть"></button>
      
      <div class="modal-header">
        <h3 class="modal-title text-center">@yield('modal_title')</h3>
      </div>
      
      <div class="modal-body">
        <div class="row justify-content-center">
          <div class="col-12 col-lg-10">
            @section('modal_body')
            @overwrite
          </div>
        </div>
      </div>
      
      <div class="modal-footer row justify-content-center">
        @section('modal_footer')
        @overwrite
      </div>
    </div>
  </div>
</div>

There are 2 files (modal1.blade.php, modal2.blade.php) with similar content like below:

@extends('modals.modal')

@section('modal_id', 'id-modal')
@section('modal_title', 'заголовок модального окна')

@section('modal_body')
  Контент модального окна
@overwrite

On one of the pages I make an output in 2 lines:

@include('modals.modal1')
@include('modals.modal2')

But the page displays 2 copies of modal1 with inserted content.
@overwrite found on laracast where the same problem, but did not help

Answer 1

Use components to accomplish this task.
/resources/views/modal.blade.php:

<div id="{{ $modal_id }}" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog {{ $modal_dialog_styles}} modal-dialog-centered" role="document">
    <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть"></button>
      
      <div class="modal-header">
        <h3 class="modal-title text-center">{{ $modal_title }}</h3>
      </div>
      
      <div class="modal-body">
        <div class="row justify-content-center">
          <div class="col-12 col-lg-10">
            {{ $slot }}
          </div>
        </div>
      </div>
      
      <div class="modal-footer row justify-content-center">
        {{ $modal_footer }}
      </div>
    </div>
  </div>
</div>

In the right place in the template:

@component('modal', ['modal_id' => '1', 'modal_title' => 'Модальное окно'])
  Содержание окна
@endcomponent