how can I modify my jQuery function to update the number counter

Question

I am showing number counter in one of my section. When I add new betslips to the container the numbers are displaying correctly. However, when I delete any of the row the counter is not getting updated. For example if there are 3 rows numbered 1, 2 and 3 and if I delete row number 2 the updated values are 1 and 3. Infact the counter should reset to 1 and 2.

Here is my JS code

Adding the betslip rows

function createSingleBetDiv(betInfo) {
    var id = betInfo['betType'] + '_' + betInfo['productId'] + '_' + betInfo['mpid'],
        div = createDiv(id + '_div', 'singleBet', 'bet gray2'),
        a =  createA(null, null, null, null, 'right orange'),
        leftDiv = createDiv(null, null, 'left'),
        closeDiv = createDiv(null, null, 'icon_shut_bet'),
        singleBetNumber = ++document.getElementsByName('singleBet').length;

    // Info abt the bet
    $(leftDiv).append('<p class="title"><b>' + singleBetNumber + '.&nbsp;' + betInfo['horseName'] + '</b></p>');
    var raceInfo = "";
    $("#raceInfo").contents().filter(function () {
        if (this.nodeType === 3) raceInfo = $(this).text() + ',&nbsp;' + betInfo['betTypeName'] + ' (' + betInfo['value'] + ')';
    });
    $(leftDiv).append('<p class="title">' + raceInfo + '</p>');

    // Closing btn
    (function(id) {
        a.onclick=function() {
            removeSingleBet(id + '_div');
        };
    })(id);
    $(a).append(closeDiv);

    // Creating input field
    $(leftDiv).append('<p class="supermid"><input id="' + id + '_input\" type="text"></p>');

    // Creating WIN / PLACE checkbox selection
    $(leftDiv).append('<p><input id="' + id + '_checkbox\" type="checkbox"><b>' + winPlace + '</b></p>');

    // Append left part
    $(div).append(leftDiv);
    // Append right part
    $(div).append(a);
    // Appending div with data
    $.data(div, 'mapForBet', betInfo);

    return div;
}

Function to remove betslip

function removeSingleBet(id) {

    // Remove the div
    removeElement(id);

    // Decrease the betslip counter
    decreaseBetSlipCount();

    // Decrease bet singles counter
    updateBetSinglesCounter();
}

function decreaseBetSlipCount() {
    var length = $("#racingBetSlipCount").text().length,
        count = $("#racingBetSlipCount").text().substring(1, length-1),
        text;
    count = parseInt(count);

    if (!isNaN(count)) count--;
    if (count == 0) text = noSelections;
    else text = count;
    $("#racingBetSlipCount").text('(' + text + ')');
}

Answer 1

You can manage to do that with following steps;

Enclose bet no with span,

$(leftDiv).append('<p class="title"><b><span class="bet_no">' + singleBetNumber + '<span>.&nbsp;' + betInfo['horseName'] + '</b></p>');

and I assume you have aouter div called "your_div"

Call below function after every increase and decrease event

function updateBetNo() {
    var counter = 1;
    $("#your_div .bet_no").each(function(i, val) {
        $(this).text(counter);
        counter++;
    });
}

Answer 2

The first problem I see is that $("#racingBetSlipCount") is likely not selecting what you think it is. Since #racingBetSlipCount is an id selector it will only select one item.

To me you need to wrap the betnumber in something accessible so you can update it without having to parse through the title.

So first you would update the creation of the betTitle:

$(leftDiv).append('<p class="title"><b><span class=\'betNum\'>' + singleBetNumber + '</span>.&nbsp;' + betInfo['horseName'] + '</b></p>');

Then you can loop through each and update the number appropriately.

var count = 1;
$.each($(".betNum"), function(){
    $(this).html(count++);
});

Answer 3

This could be done using only CSS, e.g:

DEMO jsFiddle

HTML:

 <div id="bets">
        <div class="bet">  some content</div>
        <div class="bet">  some content</div>
        <div class="bet">  some content</div>
    </div>

CSS:

#bets {
    counter-reset: rowNumber;
}

#bets .bet {
    counter-increment: rowNumber;
}

#bets .bet::before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}

All row number will be updated automatically when adding/removing any row.

Answer 4

Make the betNumber findable:

$(leftDiv).append('<p class="title"><b><span class="singleBetNumber">' + singleBetNumber + '</span>.&nbsp;' + betInfo['horseName'] + '</b></p>');

After an insert or delete renumber:

$('.singleBedNumber').each(function(idx, el) {
    $(el).html('' + (idx + 1));
});