How do I add a $( document ).ready() function to this script?
<p>I tried reading and inserting the document function in this code but I have no idea what im doing. Can someone tell where I should put the document initialization and why? this would be of great help. thanks.</p>

<p>Here's a <a href="https://jsfiddle.net/zLnroomd/2/" rel="nofollow">fiddle</a> of what the jquery is for</p>

<pre><code>&lt;script type="text/javascript"&gt;
$('.quantity, .drink').change(calculateTotal);
function calculateTotal() {
    var $form = $(this).closest('form'), total = 0;
    $form.find('.drink:checked').each(function() {
        total += $(this).data('price') * parseInt($(this).next('.quantity').val() || 0, 10);
    });

    $('#totalDiv').text(total);
}
&lt;/script&gt;
</code></pre>