Checkbox checked attribute behavior

I have a list of inputs of type checkbox in HTML, and JS uses an array variable to mark some of them as checked, like this:

profileData.interests.forEach(interest => {
 $(`#profile-interests input#${interest}`).attr("checked", true)
})

Then the user is free to check / uncheck any inputs, and once he's done, he can click save, and I need to get the list of currently checked inputs (their IDs) and put them in a variable.

If I use this code, the list of inputs will be the initial one (from the initial variable):

$("#profile-interests input").each(function() {
    if ($(this).attr('checked')) {
      newInterests.push($(this).attr('id'))
    }
})

If I use this code, the list of inputs is correct and corresponds to what I see on the page:

$("#profile-interests input:checked").each(function() {
  newInterests.push($(this).attr('id'))
})

What's wrong with the first option?

Thanks!