Question

this I think will be stupid question, but here it goes.

I need to dynamically add a div and give it ID + 1 depending on last added div’s ID of previously added element.

the div is

<div id="file-uploader-0" class="file-uploader"></div>

So I roughly came out with that code:

$('#addOneMoreFileOrGroup').on('click', function(){

    var latestFileUploaderId = $('.well-large .file-uploader').last().attr('id').split('-')[2] + 1;

    $('.well-large .control-group:last').after('<div class="control-group deal-type-online">  \
            <label class="control-label">File / File Group Title:</label> \
            <div class="controls"> \
                <input class="span4 file-title" type="text"> \
                <span class="question label label-warning" data-title="File / Group Name:" data-content="Name for your file or group of related files (for example your brand logotype in different file formats)." data-original-title="">?</span> \
                <div id="file-uploader-' + latestFileUploaderId + '" class="file-uploader"></div> \
            </div> \
        </div>');

    });

But the problem is that in the end of all that I receive “file-uploader-01”, “file-uploader-011”, “file-uploader-0111”.

I tried to use “latestFileUploaderId++” which giving me right result once as “1” and after going as “11”, “111”, “1111”.

Thank you for the tips and help!

Answer 1

You’re adding a string to a number, which causes the + operator to do string concatenation.

Convert the string to a number first.

var latestFileUploaderId = parseFloat($('.well-large .file-uploader').last().attr('id').split('-')[2]) + 1;