javascript – Dificuldade para passar o ID para o modal Visualizar & Editar

Não estou conseguindo fazer com que o modal Visualizar/Editar receba o ID correto de cada registro da tabela. Como podem observar na imagem abaixo, os botões da tabela já estão recebendo o ID correto, mas o modal não.

Botões recebendo o ID correto da tabela
inserir a descrição da imagem aqui

Modal Visualizar não recebe o ID da tabela, não sendo possível abri-lô
inserir a descrição da imagem aqui

Dessa forma abaixo passou o ID correto, mas apenas do primeiro registro da tabela, não sei qual é a forma correta de fazer isso, se alguém puder me ajudar agradeço!

$sql = mysqli_query($link,"select * from cadastros") or die("Erro!");
while($dados=mysqli_fetch_assoc($sql))
{
    $id = $dados('protocolo');     // PROTOCOLO = ID
}

Segue abaixo meu código:
index.php (Tabela):

<div class="card-body p-0">

          <?php include_once('includes/modal_novo.php'); ?>
          <?php include_once('includes/modal_visualizar.php'); ?>

          <div id="imprimir">

            <div class="d-none d-print-inline-block">
              <img src="../../all/dist/img/sky_logo_color.png" style="max-height: 50px; margin-bottom: 30px;">
            </div>

          <table class="table table-striped table-hover table-responsive-xl text-center" id="tableCadastro">
            <thead>
              <tr>
                <th>Protocolo</th>
                <th>Data de Solicitação</th>
                <th>Motorista</th>
                <th>Status</th>
                <th>Cavalo</th>
                <th>Status</th>
                <th>Carreta</th>
                <th>Status</th>
                <th class="d-print-none">Usuário</th>
                <th class="d-print-none">Anexo</th>
                <th class="d-print-none">Ações</th>
              </tr>
            </thead>
          </table>

          </div>

        </div>

$('#tableCadastro').DataTable( {               
  "processing": true,
  "serverSide": true,
  "ajax": "includes/server_processing.php",
  "order": (( 0, "desc" )),
  "columns": (
      { "data": "0", "name": "0", "autoWidth": true },
      { "data": "1", "name": "1", "autoWidth": true },
      { "data": "2", "name": "2", "autoWidth": true },
      { "data": "3", "name": "3", "autoWidth": true },
      { "data": "4", "name": "4", "autoWidth": true },
      { "data": "5", "name": "5", "autoWidth": true },
      { "data": "6", "name": "6", "autoWidth": true },
      { "data": "7", "name": "7", "autoWidth": true },
      { "data": "8", "name": "8", "autoWidth": true },
      { "data": "9", "name": "9", "autoWidth": true },
    ),
    "columnDefs": (
        {
            "targets": 10,
            "render": function (data, type, row) {

                var actionButtons = '<button class="btn bg-gradient-dark btn-sm" data-toggle="modal" data-target="#visualizar_' + row(0) + '"><i class="fas fa-eye"></i></button> <button class="btn bg-gradient-primary btn-sm" data-toggle="modal" data-target="#editar_' + row(0) + '"><i class="fas fa-cog fa-spin"></i></button>'     
                return actionButtons;
            }
        }
    )

Modal Visualizar:

<div class="modal fade" id="visualizar_<?php echo $protocolo; ?>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-xl">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel"><i class="fas fa-eye mr-2 mt-1 p-1"></i> Visualizar Cadastro (Protocolo: <?php echo $sky_cadcon("protocolo"); ?>)</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>

Na tabela o que passa o ID correto para os botões é esse código:

' + row(0) + '

Porém não funciona no modal que é em um arquivo externo. (includes/modal_visualizar.php)