How to call the same fancybox modal in several places on the page?

Question

JavaScript

A certain list of objects is dynamically generated on the site page, each of which has a "take a survey" button, which looks something like this (for example, today I have 3 such buttons on the page):

<a class="members-link perform-premiere" style="display:none; width: auto;margin: 0 0 0 0;text-align: center;" data-fancybox="simple-dialog" data-src="#dialog-content-night">
<div class="pft-api--button size-default" style="margin:auto; color:#fff; border: 1px solid rgb(0, 0, 0);">Пройти опрос</div>
 </a>

And there is a static div (outside the dynamically generated area) with a poll form:

<div id="dialog-content-night" style="display:none;">
<h4 align="left">Опрос</h4>
<form id="form_survey" method="post">
<p class="about">Представьтесь, пожалуйста</p> 
<input placeholder="ваше имя" type="text" name="sname" id="survey_name">
<p class="about">Укажите, как с вами можно связаться</p> 
<input placeholder="номер или email" type="text" name="semail" id="survey_email">
<p class="about">Сколько вы готовы потратить на билет</p> 
<input type="range" name="sprice" min="300" max="15000" value="3000" step="100" id="survey_price" onchange="document.getElementById('rangeValue').innerHTML = this.value+'рублей';">
<p class="about" id="rangeValue">3000 рублей</p>
<button id="survey_submit">ОТПРАВИТЬ</button>
</form>								
</div>

The site uses fancybox library V3, bootstrap library V5 and jquery V3.6.0

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css">

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>

It would seem that what could go wrong? But in the end, when I click on any of the "take the survey" buttons, a window with the form opens for one second and immediately disappears, but the interface for moving back and forth between slides (well, like in a gallery) remains, in each of which the same instance of my modal form appears, disappearing in the same way after a second. Well, the slides are numbered, respectively: #simple-dialog-1, #simple-dialog-2, #simple-dialog-3. I re-read all the meager fancybox api documentation, but I still don’t understand what needs to be done so that all the buttons on the page open normally the same single instance of the #dialog-content-night block? Help me please.