How to use foreach instead of adding new line each time in Ajax

I am using the following javascript to edit some content on page. The issue is I am supposed to add new line of different data, I would like to use a foreach method if possible. never mind the Gender Table column Data section. As you can se there is first_name and last_name. I would to use mode data fields, like data1 data2 etc.. I dont want to add more line for each data field.

<a href="#" class="first_name" id="first_name_'.$row["id"].'" data-type="text" data-pk = "'.$row["id"].'" data-url="process.html" data-name="first_name">'.$row["first_name"].'</a>




<script>

//For First Name Table Column Data

const first_name = document.getElementsByClassName('first_name');

for(var count = 0; count < first_name.length; count++)
{
    const first_name_data = document.getElementById(first_name[count].getAttribute('id'));

    const first_name_popover = new DarkEditable(first_name_data);
}


//For Last Name Table Column Data

const last_name = document.getElementsByClassName('last_name');

for(var count = 0; count < last_name.length; count++)
{
    const last_name_data = document.getElementById(last_name[count].getAttribute('id'));

    const last_name_popover = new DarkEditable(last_name_data);
}


//For Gender Table column Data

const gender = document.getElementsByClassName('gender');

for(var count = 0; count < gender.length; count++)
{
    const gender_data = document.getElementById(gender[count].getAttribute("id"));

    const gender_popover = new DarkEditable(gender_data, {
        source :[
            {
                value : 'Male',
                text : 'Male'
            },
            {
                value : 'Female',
                text : 'Female'
            }
        ]
    });
}


</script>

Source code: https://www.webslesson.info/2022/01/php-mysql-inline-editing-using-vanilla-javascript-with-bootstrap-5.html