title: jQuery .data() is not working as expected
body: <p>I am having problems with <code>.data</code>, this is the second time. If I use the <code>.data</code> here it does not add any data attribute:</p>
  
  <p><code>delete_button.data('to-do', toDoCount);</code></p>
  
  <p>Same as last time, it works doing</p>
  
  <p><code>delete_button.attr('data-to-do', toDoCount);</code></p>
  
  <p>I followed <a href="https://api.jquery.com/data/" rel="nofollow noreferrer">https://api.jquery.com/data/</a>, specifically <code>$( "body" ).data( "foo", 52 );</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>// Create an initial toDoCount variable
      var toDoCount = 0;
  
      //  On Click event associated with the add-to-do function
      $("#add-to-do").on("click", function(event) {
        // prevent form from submitting
        event.preventDefault();
  
        // Get the to-do "value" from the textbox and store it a variable
        var thing_todo = $('#to-do').val().trim();
  
        // Create a new variable that will hold a "&lt;p&gt;" tag.
        // Then give it an ID in the following form:
        // "item-4" or "item-3" or "item-99", where the number is equal to toDoCount.
        // Then append the to-do "value" as text to this &lt;p&gt; element.
        var new_todo_element = $("&lt;p&gt;");
        new_todo_element.attr('id', 'item-' + toDoCount);
        new_todo_element.append(' ' + thing_todo);
  
  
        // Create a button with unique identifiers based on what number it is in the list. Again use jQuery to do this.
        // Give your button a data attribute called data-to-do and a class called "checkbox".
        // Lastly append the letter X inside.
        var delete_button = $("&lt;button&gt;");
        delete_button.data('to-do', toDoCount);
      //   delete_button.attr('data-to-do', toDoCount);
        delete_button.addClass('checkbox');
        delete_button.append('X');
  
  
        // Append the button to the to do item
        new_todo_element.prepend(delete_button);
  
  
        // Add the button and toDoItem to the to-dos div
        $('#to-dos').append(new_todo_element);
  
        // Clear the textbox when done
        $('#to-do').val('');
  
  
        // Add to the toDoCount
        toDoCount += 1;
  
      });
  
      //  When a user clicks a check box then delete the specific content
      //  (NOTE: Pay attention to the unusual syntax here for the click event.
      //  Because we are creating click events on "dynamic" content, we can't just use the usual "on" "click" syntax.)
      $(document.body).on("click", ".checkbox", function() {
  
        // Get the number of the button from its data attribute and hold in a variable called  toDoNumber.
      //   var item_id =
  
        // Select and Empty the specific &lt;p&gt; element that previously held the to do item number.
  
  
      });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;head&gt;
  
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;To Do App!&lt;/title&gt;
  
    &lt;style&gt;
      #todo-item {
        font-weight: 700;
        font-size: 2em;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;!-- Title --&gt;
    &lt;h1&gt;My To Do's!&lt;/h1&gt;
  
    &lt;!-- Input Form --&gt;
    &lt;form&gt;
      &lt;span id="todo-item"&gt;To Do Item: &lt;input id="to-do" type="text" &gt;&lt;input id="add-to-do" value="Add Item" type="submit"&gt;&lt;/span&gt;
    &lt;/form&gt;
  
    &lt;hr&gt;
  
    &lt;!-- To-Do List --&gt;
    &lt;div id="to-dos"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I set data attr on this button?</p>