Jquery - Dynamically generate string within HTML code?

I have searched various sites and haven't found anything I can extrapolate a successful answer from. Either that or my spectacle wearing is justified and I have forum fatigue.

Here is my issue: I need a dynamic string within a line of HTML:

<a href="#" onClick="$.scrollTo('#xxxjump', 800, {easing:'elasout'}); javascript:animatedcollapse.toggle('xxx')" id="xxx-toggle">Next</a></div>

The reason for this is to provide extra navigation.

The triple xxx's would be a default of a three-digit number, let's say '016', and by clicking 'Next' it will generate a new number minus one. All instances in that line are replaced e.g. '016' to '015'. The 'onClick' and 'id' changes and the user's window scrolls to the new. A 'Back' line is to be included as part of the same coding.

I was thinking along the lines of server-side <% includes %>, if..elseif but can only raw code HTML and CSS.

Other functionality has been taken care of and my site is live. Any fancy taking this one on?

Cheers.

Addendum:

What I was hoping was that the script would be more inlin开发者_高级运维e. The xxx's all the have the same value within the given line. The 'onClick' drives the browser window to a nested DIV referenced above by an named anchor. Clicking Next (016) would generate a <1 number and drive the page down to the next nested DIV (015), DIV (014) etc.

<a name="016jump" id="016jump"></a>
<div class="ItemName"><a href="#" onClick="$.scrollTo('#016jump', 800, {easing:'elasout'}); javascript:animatedcollapse.toggle('016')" id="016-toggle">16&nbsp;Title</a>
    <div class="Item016">(individual CSS style)
<!-- HIDDEN CONTENT STARTS -->
        <div id="016">(this is what the id='xxx-toggle' expands)
            content
        </div>
 <!-- HIDDEN CONTENT ENDS -->
    </div>
</div>


<a name="015jump" id="015jump"></a>
<div class="ItemName"><a href="#" onClick="$.scrollTo('#015jump', 800, {easing:'elasout'}); javascript:animatedcollapse.toggle('015')" id="015-toggle">15&nbsp;Title</a>
new code...blah blah blah

If you feel the urge please visit damiankemp.com and view source. There is some redundant script for future use but my request refers to the code commented as: 'EXPANDING CONTENT DIVs', 'NAVIGATION STARTS HERE' and the DIVs 'IMAGE 016', 'IMAGE 015', 'IMAGE 014' etc. If anyone cracks it you are more than welcome to have an acknowledgement in the script and/or a donation to charity if you want.

It really depends were the number is coming from, but you could do the following:

nextNumber = function() {
  // generate your next number here...
  // wherever it may come from ;-)
  return newNumber;
}

and then

<a href="#" onclick="var i = nextNumber(); $.scrollTo('#' + i + 'jump', 800, {easing:'elasout'}); server sidejavascript:animatedcollapse.toggle(i); $(this).attr('id', i)" id="xxx-toggle">Next</a></div>

Or did I miss the point?

By adding a class to the line, following can work.

$('.next-class').click(function(){
    curr = $(this).attr('id').split('-')[0];
    next = curr-1;
    $(this).replaceWith($('<a/>',{
        id: new+'-toggle',
        class: 'next-class',
        href: '#',
        text: 'Next',
        click: function(){/*your onclick function goes here written with new value*/}
    }))
    .prepend($('<a/>',{
        id: curr+'-toggle',
        class: 'back-class'
        href: '#',
        text: 'Back',
        click: function(){/*your onclick function goes here written with curr value*/}
    }));
})

Similar thing can be done for back-class also.