JQuery Event Binding with multiple dynamic elements

Question

I'm designing a website as part of my school's Virtual Enterprises class and need some help.

Picture of Website Catalog for reference

Alright, the Order Now button <button type="button" class="order-btn" id="order-btn">Order Now</button> is dynamically added when the user clicks on one of the thumbnail images at the top of the site. I would like to have the large image and description/button, og-fullimg and og-details respectively, slide out of the viewport to the left when the user clicks the order button; they are also added dynamically. Here's what I have so far, but it doesn't seem to be working.

JS

$(document).on('click', "#order-btn", function() {
    var order = $(this).parent(".og-details").attr("#order-btn");
    $("#og-fullimg").hide('slide', {direction: 'left'}, 1000);
    $("#og-details").hide('slide', {direction: 'left'}, 1000);
});

I have included JQuery UI. Any help would be greatly appreciated. I've already checked out Event Binding on Dynamically Created Elements. Thank you for your help.

Answer

I forgot to add the easing for .hide. The code needed to make og-fullimg and og-details slide out of the viewport and for the order form, order_form, to slide in is below.

$(document).on('click', "#order-btn", function() {
    var order = $(this).parent(".og-details").attr("#order-btn");
    $("#og-fullimg").hide('slide', 'swing', '5000ms', {direction: 'left'}, 1000);
    $("#og-details").hide('slide', 'swing', '5000ms', {direction: 'left'}, 1000);
    $("#order_form").toggleClass('hidden');
}); 

It took a while, but I figured it out eventually. Thanks to those who offered help.