Get value by id of tag of current row in javascript

<div class="table-responsive">
    <table class="table table-head-custom table-head-bg table-borderless table-vertical-center">
        <thead>
        <th class="sm-width">Address</th>
        <th class="sm-width">Primary</th>
        <th class="sm-width">Action</th>
        </thead>
        <tbody>
        <tr th:if="${anc.address != null }" th:id="${anc.id}"
            th:each="anc,iterator : ${merchant.addressAndCoordinates}">
            <td><span th:text="${anc.address}"></span></td>
            <td><span th:text="${anc.isPrimary}"></span></td>
            <td>
                <button th:id="${anc.addressType}" type="button"
                        onclick="setPrimary(this)" class="btn btn-primary">Set
                    Primary
                </button>
            </td>
        </tr>
        <tbody>
    </table>

function setPrimary(button) {

        var id = event.target.parentNode.parentNode.id;
        var mid = document.getElementById("mid").value;
        var type = button.id;
        console.log(id);
        console.log(mid);
        console.log(type);
            $.ajax({
                   type: "POST",
                   dataType: 'json',
                   url: setPrimaryUrl,
                   headers: {
                       "Authorization":authorizationToken,
                       "Content-Type":"application/json",
                   },
                   data: JSON.stringify( { id: id, mid: mid, type: type } ),
                   success: function (status) {
                    alert('Success');
                    window.location.reload();
                   },
                   error: function(xhr, textStatus, error){
                      var data=xhr.responseText;
                      var jsonResponse = JSON.parse(data);
                      console.log(jsonResponse.message);
                      alert('Message: ' +jsonResponse.message);
                  },
             })

    }