title: 'data-disable-with' triggering all the buttons on the form
body: <p>I have two button in a multi-step form: CONTINUE and BACK. </p>
  
  <pre><code>&lt;%= f.button_tag "#{t :Back}", name: 'back_button', id: 'back_button', class: "btn btn-primary", style:"background: #d3f0fe !important; color: #44B5EB !important;", 'data-disable-with' =&gt;"&lt;i class='fa fa-spinner fa-spin'&gt;&lt;/i&gt; #{t :processing}".html_safe unless @event.first_step? %&gt;
  
  &lt;%= f.button_tag "#{t :Continue}", id: 'submit-all', class: "btn btn-primary", 'data-disable-with' =&gt;"&lt;i class='fa fa-spinner fa-spin'&gt;&lt;/i&gt; #{t :processing}".html_safe %&gt;
  </code></pre>
  
  <p>I added the following JS to disable one button when the user click on the other one:</p>
  
  <pre><code>$('#back_button').click( function () {
      var buttons = $('#back_button').not($(this));
      buttons.removeAttr('data-disable-with');
      buttons.attr('disabled', true);
  });
  
  
  
  $('#submit-all').click( function () {
      var buttons = $('#submit-all').not($(this));
      buttons.removeAttr('data-disable-with');
      buttons.attr('disabled', true);
  });
  </code></pre>
  
  <p>but for some reason it does not work and both buttons turn into "Processing" when either one is clicked on.</p>
  
  <p>Does anyone sees something wrong in the code please?</p>