Find and replace a number using Javascript

JQote offers an HTML templating library for JQuery. It is invoked with an object containing its parameters.

<script type="text/html" id="template">
<![CDATA[
    <p>
        <label for="question[<%= this.iteration %>][text]">Question: <span class="req">*</span></label>
        <input name="question[<%= this.iteration %>][text]" id="A_Question_<%= this.iteration %>" value="" type="text" class="f_input" />
    </p>

    <p>
        <label for="question[<%= this.iteration %>][type]">Type: <span class="req">*</span></label>
        <input name="question[<%= this.iteration %>][type]" id="A_Type_<%= this.iteration %>" type="text" class="f_input" />
    </p>
]]>
</script>

Then as part of your add() function:

<script type="text/javascript">
    var globalIteration = 0

    function add() {

      <...your code...> 

      globalIteration++;
      var obj= {
        iteration: globalIteration,
        <...any other variables to insert into template...>
      };  
      $('#template').jqote(obj).appendTo($('body'));
    }
</script>

You can store template in some hidden div with placeholders for ids (something like #id#).
Then, you can replace placeholders with actual id in javascript. Something like

var html = $('#template').html().replace('#id#', id);
list.append(html);

The next id can be calculated from the current amount of children.

var id = list.children().length + 1;

Something like this should work:

$(document).ready(function() {
  $container = $('#container');
  $button = $('#button')
  .data('clicked', 0)
  .click(function() {
    var clicked = $button.data('clicked');
    $container.append('<p><label for="question[' + clicked + '][text]">Question: <span class="req">*</span></label><input name="question[' + clicked + '][text]" id="A_Question_' + clicked + '" value="" type="text" class="f_input" /></p>');
    $button.data('clicked', clicked + 1);
  });
});

It depends on how you are binding your function. If you are binding it in javascript I would probably use the number as a fake property of the add link.

Something like

'<a href="javascript:;" question_number="1">Add</a>

Replace [1] with $(this).attr('question_number') in your javascript and at the end add $(this).attr('question_number', nextId)

A better solution might be to tack it on to the id of the link and change the id when the javascript finishes, not a good solution if you are binding by id though.

If you are binding the onclick directly in the html using something like

<a href="javascript:;" onclick="my_func();">Add</a/>

modify your function to take a parameter and change the paramter at the end of the javascript similar to above. I also like Andy's solution.

Here is how I have done it http://pintum.com.au/goCruising/details.html#tabs-2 Click the add button.

It uses jQuery, jtemplates plugin and JSON. Just look at the source for how it works.