ariáveis @PHP que não retornam ao sucesso AJAX / jQuery POST corretamente usando json_encode ()

Eu venho tentando há horas para que isso funcione. Eu tenho um<div id=""data_friends> tag e umhidden input field que eu quero atualizar usando AJAX. Odivtag é o seguinte:

<div class="friends-tab-list" id="data_friends">

    <?php 
    //Default query limits results to 8

    $sql = ("SELECT * FROM users WHERE FIND_IN_SET(?, friend_array) > 0 LIMIT 0,8");
    $query = mysqli_prepare($con, $sql);
    $query->bind_param('s', $username);
    $query->execute();

    $result = $query->get_result();

    $num_rows = $result->num_rows;

        while ($row = $result->fetch_assoc()) {
        $row['profile_pic']; 
        $row['username'];

        echo "<a class='profile-img-item' href='" . $row['username'] . "'>
              <img src='" . $row['profile_pic'] . "' title='" . $row['username'] . "'>
              </a>";
                }
        $query->close();

          ?>
</div>

A entrada oculta é a seguinte:<input id='max' type='hidden' value='<?php echo $num_rows; ?>'>

Estou clicando no botão Ver mais amigos e enviando dados paraincludes/handlers/ajax_load_profile_friends.php usando o seguinte:

$.ajax({

    url:'includes/handlers/ajax_load_profile_friends.php',
    type:'POST',
    dataType: 'json',
    data:{'username':username, 'num_friends':num_friends, 'counter':counter},

        success: function(data) {
            $('#data_friends').html(data.html);
            $('#max').val(data.num_rows);
                }
        });

Os dados provenientes de ajax_load_profile_friends.php são assim:

$query = mysqli_prepare($con,"SELECT * FROM users WHERE FIND_IN_SET(?, friend_array) LIMIT $counter"); 
$query->bind_param('s', $username);
$query->execute();

$result = $query->get_result();

$num_rows = $result->num_rows;
}       

while ($row = $result->fetch_assoc()) {
$row['profile_pic']; 
$row['username'];

$html = "<a class='profile-img-item' href='" . $row['username'] . "'>
          <img src='" . $row['profile_pic'] . "' title='" . $row['username'] . "'>
         </a>";

}   

echo json_encode(array('num_rows' => $num_rows, 'html' => $html));

Quando executo isso, recebo um retorno único quando suponho que recebo um retorno de 16 registros a cada clique que pensei ao fazer isso na minha função de sucesso$('#data_friends').html(data.html);

O valor no meu campo de entrada oculto<input id='max' type='hidden' value='<?php echo $num_rows; ?>'> não está sendo atualizado usando este$('#max').val(data.num_rows);

Há algo que eu estou perdendoajax_load_profile_friends.php que está causando esses comportamentos?

** Lembre-se de que eu posso fazer isso funcionar quando não usojson_encode & escreva a função de sucesso como esta$('#data_friends').html(data.html); e remova odataType: 'json', do AJAX. O problema aqui é que, nos dois sentidos, não consigo atualizar meu valor de entrada oculto. Imaginei que tentaria corrigir esse método, já que a maioria dos exemplos especificajson_encode() como a maneira de retornar dado

questionAnswers(2)

yourAnswerToTheQuestion