Why is jQuery not adding the data attribute to this element?
<p>I have a hidden modal box on my page that gets rendered with the call of this create.js file. </p>

<p>Everything else is working nicely except for adding a data-meal_id attribute to the element. </p>

<p>Here's the jquery:</p>

<pre><code>var $modal, $modal_close, $modal_container, $meal_id;
$modal = $('#modal');
$modal_close = $modal.find('.close');
$modal_container = $('#modal-container');
$meal_id = &lt;%= @meal_id %&gt;

$modal
  .data('meal_id', $meal_id)
  .prepend($modal_close)
  .css('top', $(window)
  .scrollTop() + 100)
  .show();

$modal_container.show();

$(document).on('click', '#modal .close', function() {
  $modal_container.hide();
  $modal.hide();
  return false;
});       
</code></pre>

<p>Here are the elements before the above code is triggered:</p>

<pre><code>&lt;div id="modal-container"&gt;&lt;/div&gt;
&lt;div id="modal"&gt;
</code></pre>

<p>After being triggered...</p>

<pre><code>&lt;div id="modal-container" style="display: block;"&gt;&lt;/div&gt;
&lt;div id="modal" style="top: 100px; display: block;"&gt;&lt;a href="#" class="close"&gt;cancel&lt;/a&gt;
</code></pre>

<p>Totally skips the data attribute??!</p>
