title: Change element id in real time
body: <p>I'm making online shop. I have a button "Add product" with id #sendProduct. After click this button must change id to #deleteProduct. It changes id, but old handlers still being active after ID change. I mean when i click on button again, it reacts like id wasn't changed. 
  Look at my code. </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-js lang-js prettyprint-override"><code>$(document).ready(function () {
      $('#sendProduct').on('click', function () {
          var id = $(this).attr('data-id');
          var token = $("meta[name='_csrf']").attr("content");
          var header = $("meta[name='_csrf_header']").attr("content");
          $.ajax({
              url: '/cart/add-to-cart',
              method: 'POST',
              contentType: "application/json; charset=utf-8",
              data: JSON.stringify(id),
              beforeSend: function (xhr) {
                  xhr.setRequestHeader(header, token);
              },
              dataType: 'json',
              success: function (id) {
                  $('#sendProduct').text('Delete from cart');
                  $('#sendProduct').attr('data-id', id);
                  $('#sendProduct').attr('id', 'deleteProduct');
                  console.log($('#deleteProduct').attr('id'));
              }
          });
      });
      
      $('#deleteProduct').on('click', function () {
          var id = $(this).attr('data-id');
          var token = $("meta[name='_csrf']").attr("content");
          var header = $("meta[name='_csrf_header']").attr("content");
          $.ajax({
              url: '/cart/delete-product',
              method: 'GET',
              contentType: "application/json; charset=utf-8",
              data: JSON.stringify(id),
              beforeSend: function (xhr) {
                  xhr.setRequestHeader(header, token);
              },
              dataType: 'json',
              success: function (id) {
                  $('#deleteButton').text('Add product');
                  $('#deleteButton').attr('data-id', id);
                  $('#deleteButton').attr('id', 'sendProduct');
              }
          })
  
      })
  });</code></pre>
  </div>
  </div>
  </p>