increment value works but not on appended HTML [duplicate]

I created this query to explicitly give each checkbox an index. However, it seems to only work for the first appended row, which apparently only uses the set value. It never uses the incremented value after 1. The console still gives the right value of the variable though, so I'm confused as to why it happens.

var rowNum = 1;
$(document).ready(function() {
  var html = '<tr> <td><input type="text" name="lName[]" id="lName" ></td> <td><input type="text" name="fName[]" id="fName" ></td> <td><input type="text" name="mName[]" id="mName"></td> <td><input type="text" name="suffixName[]" id="suffixName" ></td> <td> <select name="gender[]" id="gender"> <option value="Male">Male</option> <option value="Female">Female</option> </select> </td> <td><input type="date" name="birthday[]" id="birthday" ></td> <td><input type="text" name="phoneNumber[]" id="phoneNumber" ></td> <td> <select name="civilStatus[]" id="civilStatus"> <option value="Single">Single</option> <option value="Married">Married</option> <option value="Widowed">Widowed</option> </select> </td> <td><input type="checkbox" name="isHeadOfFamily[' + rowNum + ']" id="isHeadOfFamily" value="1"> </td> <td><input type="checkbox" name="isEmployed[' + rowNum + ']" id="isEmployed" value="1"> </td> <td><input type="checkbox" name="isSelfEmployedInBusiness-[' + rowNum + ']" id="isSelfEmployedInBusiness" value="1"> </td> <td><input type="checkbox" name="isSelfEmployedInInformalSector[' + rowNum + ']" id="isSelfEmployedInInformalSector" value="1"> </td> <td><input type="checkbox" name="isSoloParent[' + rowNum + ']" id="isSoloParent" value="1"> </td> <td><input type="checkbox" name="isSeniorCitizen[' + rowNum + ']" id="isSeniorCitizen" value="1"> </td> <td><input type="checkbox" name="isPWD[' + rowNum + ']" id="isPWD" value="1"> </td> <td> <select name="relationToHeadOfFamily[]" id="relationToHeadOfFamily"> <option value="Spouse">Spouse</option> <option value="Child">Child</option> <option value="Sibling">Sibling</option> <option value="Parent">Parent</option> <option value="None">None</option> </select> </td> <td><button type="button" name="addmore" id="addmore">Add More</button></td><td><button type="button" name="remove" id="remove">Remove</button></td> </tr>';

  $(document).on('click', "#addmore", function() {
    $("#table_input-people").append(html);
    rowNum++;
    console.log(rowNum);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
<tbody id="table_input-people"></tbody>
</table>