title: two modals pop up when one button is clicked
body: <p>I currently have two buttons on my screen that open up the same modal. However when i click one of the buttons, both modals pop up, one behind each other, when i only want one. I think the problem is that the javascript is iterating over every modal with the class <code>.modal__cancel-appointment</code>. However im not sure how to change the javascript in order to only open up one model.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>(function ($, _) {
    'use strict'
  
    window.HERO = window.HERO || {}
    window.HERO.modals = window.HERO.modals || {}
  
    // CANCEL APPOINTMENT MODAL
    var CancelAppointmentModal = _.assign(
      Object.create(window.HERO.modals.Base),
      {
        addEventListeners: function () {
          this.$el
            .on('click', '.keep-appointment-button', this.close.bind(this))
            .on('click', '.cancel-appointment-button', this.cancelAppointment.bind(this))
        },
  
        cancelAppointment: function (evt) {
          var $button = $(evt.currentTarget)
          this.disableActions()
          $button.text($button.data('disable-with'))
  
          $.get($button.data('path'))
            .done(function (data) {
              Turbolinks.visit(data.redirect_to)
            }).fail(function (data) {
              console.error('Call to ' + evt.currentTarget.href + ' failed')
              Turbolinks.visit(data.redirect_to)
            })
        },
  
        disableActions: function () {
          this.$('.cancel-appointment-button').attr('disabled', true)
        }
      }
    )
  
    function initModals () {
      var $modals = $('.modal__cancel-appointment')
      $modals.each(function (index) {
        Object.create(CancelAppointmentModal).init($modals.eq(index))
      })
    }
  
    $(document).on('turbolinks:load', initModals)
  })(
    window.jQuery,
    window._
  )</code></pre>
  </div>
  </div>
  
  This is the top of my model:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div class="modal modal__cancel-appointment"
      data-test-modal="cancel-appointment"
      data-width="540"
      data-modal-control=&lt;%= "[data-modal-control='.modal__cancel-appointment-#{appointment.id}']" %&gt;&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;%= button_tag t("common.cancel_title"),
                                type: "button",
                                class: "dropdown-element cancel-appointment-dropdown-button",
                                data: { "modal-control" =&gt; ".modal__cancel-appointment-#{appointment.id}" } %&gt;
                &lt;%= render "shared/modal_cancel_appointment", appointment: appointment, invoice: invoice %&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>                &lt;%= button_tag "Cancel Appointment",
                                  type: "button",
                                  class: "hero-button hero-button--invoices",
                                  data: { "modal-control" =&gt; ".modal__cancel-appointment-#{@appointment.id}" } %&gt;
  
                  &lt;%= render "shared/modal_cancel_appointment", appointment: invoice.appointment, invoice: @invoice %&gt;</code></pre>
  </div>
  </div>
  </p>