Passer une boucle dans du json_encode

Bonjour,

Salut salut je voudrais passer une boucle php dans du json encode pour l'afficher avec js.

En fait j'ai une page html qui appele une function js dans laquelle il y as un fetch ->
Ce fetch fait appele à une page php ->
Cette page php insere ma donnée dans ma bdd ->
Puis elle boucle des éléments html en récupérant les données stocké dans ma table

Et bien j'aimerais afficher le resultat de cette boucle sur ma page html

voila ou je veux inserer mon résulat :

<section class="task">
            
</section>

voila mon fetch :

const value = document.querySelector('.box_text_add').value

    const form = new FormData()
    form.append("task_name_value", value)

    fetch('add.php', {
        method: "POST",
        body: form
    })
    .then( response => { return response.json() })
    .then(data=>{
        console.log(data);
    })

et voici mon php :

$data = $_POST['task_name_value'];

if ($data != null) {

    $etat = 2;
    $name = $data;

    $insert = $bdd->prepare('INSERT INTO task (task_name, task_etat) VALUES (?, ?)');
    $insert->execute(array($name, $etat));

} else {
    echo "error";
}

$recupProd = $bdd->query('SELECT * FROM task INNER JOIN task_not_complete ON task.id = task_not_complete.task_etat');
$valeurs = $recupProd->fetch();

while ($valeurs = $recupProd->fetch())
    {
        ?>
        <div class="box_task box">
            <div class="circle circle_all"><img src="complete.png" alt="" class="tchek"></div>
            <p class="box_task_text"><?= $valeurs['task_name'] ?></p>
        </div>
        <?php
    }
    
echo json_encode();

Alors j'ai bien essayer de mettre ma boucle dans le json_encode mais sa me le soulignait en rouge ...