Jquery, $(this).next problem

Question

Trying to truncate some code here and running into a problem:

<script type="text/javascript">
  $(function() {
  $('#a1').click(function() {
    $(this).next('#desCopy').appendTo('#description');
    $(this).next('#imgPlace').appendTo('#IMGbox');
    return false;
  });
});
</script>

    <!--Content-->


    <div id="content" style="background:#000; width:989px;">

        <div style="float:left; left:18px; margin:0; width:337px; position:relative; padding:15px 0 0 0; color:#FFF;">


            <div id="description">

            </div>

        </div>

        <div id="IMGbox" style="float:left; position:relative; display:block; background:#F00; width:652px; height:258px; background:#0FF; overflow:hidden;">



        </div>

        <div style="float:right; background:#CCC; height:25px; width:652px;">

            <ul>

                <li><a id="a1" href="#">Slide 1</a>
                    <ul style="display:none;">
                        <li><span id="desCopy">Test description, Test description</span></li>
                        <li><img src="images/test.jpg" id="imgPlace"></li>
                    </ul>
                </li>

                <li><a id="a1" href="#">Slide 2</a>
                    <ul style="display:none;">
                        <li><span id="desCopy">2222, 22222</span></li>
                        <li><img src="images/test2.jpg" id="imgPlace"></li>
                    </ul>
                </li>

            </ul>

        </div>


    </div>

Answer 1

You can't have the same ID multiple times, it's invalid HTML and various things won't behave correctly, including jQuery ID selectors. You probably want to use a class instead, like this:

<span class="desCopy">
<img class="imgPlace">

Then you can do this:

$(function() {
  $('#a1').click(function() {
    $(this).parent().find('.desCopy').appendTo('#description');
    $(this).parent().find('.imgPlace').appendTo('#IMGbox');
    return false;
  });
});

Answer 2

So the outcome I wanted was to simply switch out content back and forth between my ul, and my defined ID divs.

A good point Nick brought up was that I was using same ID which was the main reason. So I switched my anchor ID's to class's with the following code and got the end result I needed.

$(function() {
  $('.a1').click(function() {
    $('#description').find('.desCopy').hide();
    $('#IMGbox').find('.imgPlace').hide();
    $(this).parent().find('.desCopy').clone().appendTo('#description');
    $(this).parent().find('.imgPlace').clone().appendTo('#IMGbox');
    return false;
  });
});