select – mostrar nome da coluna de acordo com a chave primária

Minha tabela “estados” no banco de dados tem três colunas: id, nome e uf.
Tenho dois select no html.
Quero que quando selecionar a select da uf, o select do nome seja preenchido.

 <script type = "text/javascript">
    function showstates() {
    var ufa = document.getElementById("uf");
    var valuea = ufa.options(ufa.selectedIndex).value;
    <?php 
    $query4 = "SELECT nome FROM estados where id = valuea"; 
    $estado_uf = mysqli_query($conn, $query4);
    ?>
    var x = document.createElement("option");    
    x.setAttribute("value", valuea);
    var t = document.createTextNode("<?php echo $estado_uf ?>");
    x.appendChild(t);
    document.getElementById("estado").appendChild(x);
    }
    </script> 
    
    <label><b> UF </b></label>
    <select name = "uf" id = "uf" onchange = "showstates()">  
    <option value = "" disabled selected hidden> Selecione a UF </option>
     
    <?php while ($row = mysqli_fetch_array($result, MYSQLI_BOTH)):; ?>
        <option value = "<?php echo $row (0);?>" > <?php echo $row(2); ?> </option>
        <?php endwhile; ?>
     </select> </br></br> 
    
    
    
    <label><b> Estado </b></label>
    <select name ="estado" id = "estado"> 
    
    </select>  </br></br>