Simplemodal: four times on a page leads to extra "next" or "previous" button

NOTE: This has been edited from the original question with a solution. The original question was too long and had many errors in its thinking. For this I apologize.

We experienced a problem when each instance of the call to the simplemodal div class .basic-modal-content added an extra next or previous button in the modal windows at the end of a chain. We had two separate areas of modal content and they were joined at the modal window.

This was solved by having two div classes: .basic-modal-content-foo and .basic-modal-content-bar and having two instances of the script below on the page. All that is required is some CSS...

.basic-modal-content-foo {
    display: none;
}

.basic-modal-content-bar {
    display: none;
}

Here is the "foo" version of the script. Modify the 4 instances of the div class for the bar version.

<script>
$(function()
{
    $('a.foo').each(function()
    {
            $(this).click(function()
            {
                    $('#modal_' + this.id).modal({
                    overlayClose:true
                    });
            });
    });

    var num_divs = $('div.basic-modal-content-foo').length;

    $('div.basic-modal-content-foo').each(function(i)
    {
            /* if there is a previous div add a link to it
             */
            if (i > 0)
            {
                    /* get the ID for previous div
                     */
                    var prev_id = $(this).prev('.basic-modal-content-foo').attr('id');

                    /* add the link with click event
                     */

$('<a href="#" class="simplemodal-container-prev"></a>')
                            .click(function()
                            {
                                    $.modal.close();
                                    $('#' + prev_id).modal({overlayClose:true});
                            })
                            .appendTo($(this));
            }

            /* if there is a next div add a link to it
             */
            if (i < num_divs - 1)
            {
                    /* get the ID for next div
                     */
                    var next_id = $(this).next('.basic-modal-content-foo').attr('id');

                    /* add the link with click event
                     */
                    $('<a href="#" class="simplemodal-container-next"></a>')
                            .click(function()
                            {
                                    $.modal.close();
                                    $('#' + next_id).modal({overlayClose:true});
                            })
                            .appendTo($(this));
            }
    });

});

</script>

and some CSS to create an image for each window that shows the progress bar through the ul/li list.

The code to produce the above looks like this:

    <h1>Our HEADLINE</h1>
<div id="basic-modal">
<ul>
<li><a href="#" id="one">TEXT 1</a></li>
<li><a href="#" id="two">TEXT 2</a></li>
<li><a href="#" id="three">TEXT 3</a></li>
<li><a href="#" id="four">TEXT 4</a></li>
<li><a href="#" id="five">TEXT 5</a></li>
<li><a href="#" id="six">TEXT 6</a></li>
</ul>
</div>

<div class="basic-modal-content-foo" id="modal_one">
<img src="link to modal_one.png" alt="progress bar"/>
<h3>headline text</h3>
<p>body text</p>
</div>

<div class="basic-modal-content-foo" id="modal_two">
<img src="link to modal_two.png" alt="progress bar"/>
<h3>headline text</h3>
<p>body text</p>
</div>

<div> ... other divs 3 4 and 5 </div>

<div class="basic-modal-content-foo" id="modal_six">
<img src="link to modal_six.png" alt="progress bar"/>
<h3>headline text</h3>
<p>body text</p>
</div>

And staying within the div class the additional text for the "bar" modal.

<div class="basic-modal-content-bar" id="modal_seven">
<img src="link to modal_seven.png" alt="portrait 1"/>
<h3>headline text</h3>
<p>BIOGRAPHY</p>
</div>

<div class="basic-modal-content-bar" id="modal_eight">
<img src="link to modal_eight.png" alt="portrait 2"/>
<h3>headline text</h3>
<p>BIOGRAPHY</p>
</div>

<div class="basic-modal-content-bar" id="modal_nine">
<img src="link to modal_nine.png" alt="portrait 3"/>
<h3>headline text</h3>
<p>BIOGRAPHY</p>
</div>
</div>

The ul/li structure works on the main page for the links. The modal windows allow one to browse through all of the six TEXTs. There is a common CSS style to the windows and a custom image in each of the modal windows derived from the "#modal_[number] img" CSS in the form of a progress bar.

Here is the relevant code from one of the three biographic links. You will note that the 开发者_开发百科biographic links each have to have all three in this current configuration.

<h4>Our HEADLINE</h4>
<div id="basic-modal">
<div class="bottom-widget-text">
<img src="picture" alt="not relevant to the simplemodal problem"/>
<p>Read about person NUMBER 1 by clicking on the following link:
<a href="#" class="bar" id="seven" >Expand</a>
</p>
</div>
</div>

Similarly the "biographies" open up from a different area of the page. The modal windows allow one to browse through all three of the BIOs. The bios use the SAME CSS style windows and a custom image in each of the modal windows derived from the "#modal_[number] img" CSS in the form of a portrait.

Everything is working well.

One question left: I have two instances of the JS on the page. Can this be combined into one script?

Thanks in advance.

DDF

One question left: I have two instances of the JS on the page. Can this be combined into one script?

I don't see why not. Have you tried it?