jQuery append method issue

Question

I have a simple jQuery question. I have a Web App that looks like the following:

The HTML for the page is here:

<div id="hwAddition">
                <div id="itemNumber" style="text-decoration: underline; font-size: large;">Item #</div>
                <div class="form-row">
                    <div class="form-group col-md-4">
                        <label for="hwDescription" style="text-decoration: underline;">Description</label>
                        <form:textarea id="hwDescription" type="text"
                            class="form-control short" path="hwDescription"
                            name="hwDescription" placeholder="Description" maxlength="100"
                            rows="2" style="resize: none;" />
                    </div>
                    <div class="form-group col-md-4">
                        <label for="hwSerialNumber" style="text-decoration: underline;">Serial
                            #</label>
                        <form:input type="text" class="form-control" path="hwSerialNumber"
                            name="hwSerialNumber" placeholder="Serial #" maxlength="100" />
                    </div>
                    <div class="form-group col-md-4">
                        <label for="hwModelNumber" style="text-decoration: underline;">Model
                            #</label>
                        <form:input type="text" class="form-control" path="hwModelNumber"
                            name="hwModelNumber" placeholder="Model #" maxlength="100" />
                    </div>
                </div>
                <hr />
            </div>
        </div>

My issue lies with the "Item #" label. I'm trying to simply append a value after the markup so that the labels say "Item #1", "Item #2", and so on. The counting procedure is working and the jQuery is shown here:

    var count = 1;
    $(function() {
    
        $("#hwAddition").attr('id', 'hwAddition' + count);
        $("#itemNumber").attr('id', 'itemNumber' + count);
        $("#itemNumber").append(count);
        
    });
    
    $('#hwAdditionButton').click(
            function() {
                
                var clonedObj = $("#hwAddition" + count).clone().attr('id', 'hwAddition' + (count+1));
                
                clonedObj.find("#itemNumber" + count).attr('id', 'itemNumber' + (count+1));
                
                clonedObj.insertAfter("#hwAddition" + count);
                
                $("#itemNumber").append(count);
                
                count++;
            });

For some reason though, the .append() methods are adding nothing to the end of the labels. What am I doing incorrectly?

Answer 1

At the 5th and 12th rows, you do:

$("#itemNumber").append(count);

You're searching for #itemNumber without a "+ count", if I understand correctly you've changed both the original's and the clone's IDs to be itemNumber + count.

Also, the proper way to append text is:

$('#itemNumber' + count).append(document.createTextNode(count));

But why using append? in your case you can do:

$('#itemNumber' + count).text("Item #" + count);