html id jako zmienna z pętli js

Cześc, nie mam pomysłu jak wyciągnąć zmienna id z objektów po których leci pętla,
teoretycznie jak dla mnie powinno to działać ale coś jednak jest nie tak podpowie ktoś ?
Wiem że to trywialny problem ale męczę się z nim na tyle długo że napisałem tutaj

function readData() {
    $.ajax({
        url: apiURLGetAllCandidates
            + 'all'
    })
        .done(candidateList => {
            candidateList.forEach(getCandidate => {
                const $element = $(
                    " <div class=\"candidate-list\">" +
                    " <table class=\"info-table\" id=\"info-table\">\n" +
                    "        <tr>\n" +
                    "            <th>name</th>\n" +
                    "            <th>surname</th>\n" +
                    "            <th>age</th>\n" +
                    "            <th>education</th>\n" +
                    "            <th>experience</th>\n" +
                    "        </tr>\n" +
                    "        <tr class=\"info-row\">\n" +
                    "            <th id=\"name\">" + getCandidate.name + "</th>\n" +
                    "            <th id=\"surname\">" + getCandidate.surname + "</th>\n" +
                    "            <th id=\"age\">" + getCandidate.age + "</th>\n" +
                    "            <th id=\"education\">" + getCandidate.candidateEducation + "</th>\n" +
                    "            <th id=\"experience\">" + getCandidate.experience + "</th>\n" +
                    "        </tr>\n" +
                    " </table>" +
                    "        <button class='delete-button' data-id =\"${getCandidate.id}\">Delete candidate</button>\n" + // chodzi o ten kawałek kodu chciałbym w tym id zapisać id z obiektu natomiast cały czas kompilator traktuje mi to jako zwykłego stringa
                    "        <button class='detail-button'>Show details</button>" +
                    "<table class='details-table' id='details-table'>" +
                    "        <tr>\n" +
                    "            <th>phone number</th>\n" +
                    "            <th colspan='2'>email</th>\n" +
                    "            <th>salary expectations</th>\n" +
                    "            <th>city</th>\n" +
                    "        </tr>\n" +
                    "        <tr class=\"info-row\">\n" +
                    "            <th id =\"phone-number\">" + getCandidate.phoneNumber + "</th>\n" +
                    "            <th colspan='2' id=\"email\">" + getCandidate.email + "</th>\n" +
                    "            <th id=\"salary-expectations\">" + getCandidate.salaryExpecations + "</th>\n" +
                    "            <th id=\"city\">" + getCandidate.city + "</th>\n" +
                    "        </tr>\n" +
                    "        <tr>" +
                    "            <th colspan=\"5\">short description</th>\n" +
                    "        </tr>" +
                    "        <tr>" +
                    "            <th colspan=\"5\" class='info-row'>" + getCandidate.shortDescription + "</th>\n" +
                    "        </tr>" +
                    "    </table>\n " +
                    "</div>"
                );

                $CandidateList.append($element);
            });
        });
}

data-id =\"${getCandidate.id}\">Delete candidate</button>\n" + // chodzi o ten kawałek kodu chciałbym w tym id zapisać id z obiektu natomiast cały czas kompilator traktuje mi to jako zwykłego stringa

Bo tak to wkleiłeś, jak już

data-id ='+${getCandidate.id}+'

a poza tych chyba po prostu:

data-id ='+getCandidate.id+'

bo getCandidate zda się jest obiektem?

Poza tym, nie znam się w sumie na jQuery, ale ty chyba przy każdym przebiegu pętli po elementach dodajesz tu zdefiniowaną zawartość do WSZYSTKICH elementów a nie tylko tego aktualnego.

Zamiast cudzysłowów możesz użyć template strings - będzie się wygodniej pisało.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals