[jQuery] How do I increment the name of cloned elements?

[jQuery] How do I increment the name of cloned elements?


Hi, all.
I'm working on adding file inputs to a form.
Here's my jQuery using the clone method:
    <script>
    
        $(document).ready(function() {
            $('#add-image').click(function() {
            $('#image-input').clone(true).insertBefore('#add-image#');
            });
        });
        
    </script>
Here's my HTML:
    <div id="image-input">
        

Click the browse button to locate an image.


        <input name="image-upload-1" type="file" size="40" value=""><br />
        <br />
    </div>
    
    <p id="add-image"><a href="#">Add Image</a>
    <br />
Question:
How do I increment the name of the file input above, "image-upload-1", and
cause the first cloned input to be called "image-upload-2", then "image-upload-3", etc.?
Thanks for any replies!
Rick