jQuery get from closest button data Tag from in included script

Question

Good morning,

in a website you can include an iFrame from my project to display information:

      <link rel="stylesheet" href="https://example.de/static/css/embedded.css">
      <div class="alert alert-secondary">
         <div class="ce_text"></div>
         <button id="ce_openOverlay" class="btn btn-church" style="background-color: #800040" data-domain="test.example.de" data-ce_eventid="1">book now</button>
         <div id="ce_overlay">/div>
      </div>
      <script src="https://example.de/static/js/embedded.js"></script>

This also works very well, except for one small thing. That is, the user can of course include several of these snippets on his page. In embedded.js I load the appropriate information for the overlay, using the "data-ce_eventid" automatically when the page is loaded:

if (!window.jQuery) {
    var script_tag_jquery = document.createElement('script');
    script_tag_jquery.setAttribute('src', 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.js');
    var script_tag_accounting = document.createElement('script');
    script_tag_accounting.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/accounting.js/0.4.1/accounting.min.js');
    document.head.appendChild(script_tag_accounting);
    document.head.appendChild(script_tag_jquery);
    window.onload = function () {
        var ce_domain = $('#ce_openOverlay').data('domain');
        var ce_eventid = $('#ce_openOverlay').data('ce_eventid');

How can I now make sure that in the var ce_eventid only the eventid of the button above the script tag is inside and not for example of one below?

Answer 1

Check this question: How may I reference the script tag that loaded the currently-executing script? first answer suggest document.currentScript so using this you will get:

var div = $(document.currentScript).prev();
if (div.hasClass('alert')) {
   // your code
}