Why is Javascript equating 5 == 8 as true?

Question

So I have 2 check-boxes:

var statusList = [];
function updateStatusString(x) {
    if (statusList != null) {
        if (statusList.length > 0) {
            for (var i = 0; i < statusList.length; i++) {
                if (parseInt(statusList[i]) == parseInt(x)) {
                    statusList[i] = 123;
                } else {
                    statusList.push(x);
                }
            }
        } else {
            statusList.push(x);
        }
    }
    alert(statusList);
}

<label>&nbsp;<input type="checkbox" name="Active" value="5" onchange=updateStatusString("5")>&nbsp;"Active"</label>
<label>&nbsp;<input type="checkbox" name="NonActive" value="8" onchange=updateStatusString("8")>&nbsp;"Active"</label>

When I click a checkbox it adds it to a JavaScript list, if it's already in the list I want to overwrite it with another value (123 in this example).

But when I click the second one (doesn't matter the order, the 2nd element is always 123 for some reason.

Where as I would expect if I click the top check-box it would be a list containing '5', then clicking the second check-box I would expect 5,8 but it alerts as 5,123, don't really see why it's doing this as 5==8 is false... any ideas?

Updated algorithm to fix underlying issue:

In-case anyone ever finds this useful I changed the algorithm to a better alternative:

var statusList = [];
function updateStatusString(x) {
    if (statusList.length > 0) {
        if (statusList.includes(x)) {
            var idx = statusList.indexOf(x);
            if (idx != -1) {
                statusList.splice(idx, 1);
            }
        }
        else {
            statusList.push(x);
        }
    } else {
        statusList.push(x);
    }
    alert(statusList);
}

Answer 1

first iteration:

since status list is empty you are adding 5 in it,

second iteration:

statulsList = [5]

you are adding 8 so now the statusList value is [5,8] which means also the length is 2,

so we have a third iteration which in this case 8 === 8 .

if you want to have it different save the length of the status list before adding the other item on the list.

var statusList = [];
function updateStatusString(x) {
    if (statusList != null) {
        if (statusList.length > 0) {
           var lengthStat = statusList.length;
            for (var i = 0; i < lengthStat; i++) {
                if (parseInt(statusList[i]) == parseInt(x)) {
                    statusList[i] = 123;
                } else {
                    if(! (statusList.indexOf(x) != -1))
                        statusList.push(x);
                }
            }
        } else {
            statusList.push(x);
        }
    }
    alert(statusList);
}

<label>&nbsp;<input type="checkbox" name="Active" value="5" onchange=updateStatusString("5")>&nbsp;"Active"</label>
<label>&nbsp;<input type="checkbox" name="NonActive" value="8" onchange=updateStatusString("8")>&nbsp;"Active"</label>