Slidetoggle is not working correctly on click

Question

I have two containers, one shows grouped boxes, quantities and totals, and the other container shows details.

The div data value of each container is created on run time dynamically. both containers have the data, but the default container to show on page is the grouping one.

Those values are grabbed using jQuery to display in what is a "preview" table, outside of the div containers.

I am trying to use slidetoggle to switch the containers at the click of a link and that part works. The problem I am having is with the table, all the values are incorrect when they display the first time, and subsequently as the link is clicked

Here is a link that shows my jQuery script so far: [My jsfiddle][1]

The test mark-up:

<div class="ToogleGroupContainer">                        
<div class="shipToSingleSection">
        <div class="shoppingCart_Category">
                <div class="shoppingCart_Box">Box#01</div>
                <div class="shoppingCart_qtyArea">
                    <div class="shoppingCart_qtyLabel">QTY</div>
                    <div class="shoppingCart_qty-select">5</div>
                </div>
        <div class="shoppingCart_Price_Each">Each 26.99</div>
        <div class="shoppingCart_SubTotal_Each">Price 134.95</div>                
            </div>
            <hr />           
</div>  
<div class="shipToMultipleSection" style="display:none;">
           <div class="shoppingCart_Category">
                <div class="shoppingCart_Box">Box#01</div>
                <div class="shoppingCart_qtyArea">
                    <div class="shoppingCart_qtyLabel">QTY</div>
                    <div class="shoppingCart_qty-select">1</div>
                    <div class="shoppingCart_qty-select">1</div>
                    <div class="shoppingCart_qty-select">1</div>
                    <div class="shoppingCart_qty-select">1</div>
                    <div class="shoppingCart_qty-select">1</div>
                </div>
        <div class="shoppingCart_Price_Each">Each 26.99</div>
        <div class="shoppingCart_SubTotal_Each">Price 26.99</div>

            </div>
            <hr />
</div>
</div>
<table class="tableOrderPreviewTotals" border=1>
    <tr>
        <td class="yord_hdr">Item</td>
        <td class="yord_hdr_center">QTY</td>
        <td class="yord_hdr_center">Each</td>
       <td class="yord_hdr_center">Price</td>    
    </tr>
    <tr>
        <td class="yord_line_item" stlye="display:none;">
            <div id="itemOrderPreview"></div></td>
        <td class="yord_line_qty" stlye="display:none;">
            <div id="qtyOrderPreview"></div></td>
        <td class="yord_line_right" stlye="display:none;">
            <div id="priceEachOrderPreview"></div>
        </td>
        <td class="yord_line_right" stlye="display:none;">
            <div id="subtotalEachOrderPreview"></div>
        </td>   
    </tr>
</table>

<br/>
<a href="" class="shipToMultipleLink">Ship Order to Multiple Addresses</a>

You will see how messy it is right now. I need to be able to show the values correctly, depending of which container is shown on the page.

The default display should be:

Item QTY Each Price

Box#1 5 26.99 134.95

When the Ship to multiple addresses link is clicked (toggle), the table line should be:

Item QTY Each Price

Box#1 1 26.99 26.99

Box#1 1 26.99 26.99

Box#1 1 26.99 26.99

Box#1 1 26.99 26.99

Box#1 1 26.99 26.99

When the Ship to sinlge addresses link is clicked (toggle), the table line should be (like default):

Item QTY Each Price

Box#1 5 26.99 134.95

Any help is much appreciated.

Thank you!

Answer 1

Dude, that's really messy..

Just for a start, check your jQuery, for example:

 $('shipToMultipleLink').hide();
 $('shipToSingleLink').show();

Should be

 $('.shipToMultipleLink').hide();
 $('.shipToSingleLink').show();

Then please, tidy it up a little bit, and explain better your problem so we can help you out..

Answer 2

try

  $(document).ready(function () {
        $('.shipToMultipleLink').click(function () {
            $('.shipToMultipleSection, .shipToSingleSection').slideToggle('fast');
            return false;

        });

            $.each($('.shipToMultipleSection .shoppingCart_qty-select'), function () {
                $("#itemOrderPreview").append($(".shoppingCart_Box").html()).append("<br>")
                $("#qtyOrderPreview").append($(this).html()).append("<br>");

                var each = $('.shoppingCart_Price_Each').html().replace(/Each/,"")
                $("#priceEachOrderPreview").append(each).append("<br>");

                var price = +each * $(this).text()
                 $("#subtotalEachOrderPreview").append(price).append("<br>");
            });

      var h = '<tr class="singleLine" style="display:none;">'
      /* edited */
      h += '<td>' + $(".shoppingCart_Box").html() + '</td>'
      h += '<td>' + $(".shoppingCart_qty-select").html() + '</td>'
      h += '<td>' + $('.shoppingCart_Price_Each').html().replace(/Each/,"") + '</td>'
      h += '<td>' + $('.shoppingCart_SubTotal_Each').html().replace(/Price/,"") + '</td>' 
      h += '</tr>'
      $(".tableOrderPreviewTotals tr:last-child").after(h)

    });

jsfiddle: http://jsfiddle.net/alemarch/k3t0cbcc/4/ is this what you require?