PHP - insertar datos y mostrar select mysql con javascript

<form method="POST" name="form-work" action="guardar.php">

    <div class="form-group">

        <label>Fecha</label>

        <input type="date"

        oninvalid="this.setCustomValidity('Ingresar una fecha')"

        oninput="this.setCustomValidity('')"

        class="form-control"

        id="fecha"

        name="fecha"

        min="2021-01-01"

        max="2021-12-31"

        required>

    </div>

    <div class="form-group">

        <label>Nombre</label>

        <input type="text"

        oninvalid="this.setCustomValidity('Ingresar nombre')"

        oninput="this.setCustomValidity('')"

        class="form-control"

        id="nombre"

        name="nombre"

        placeholder="Escribir el nombre"

        required>

    </div>

    <div class="form-group">

        <label>Direccion</label>

        <input type="text"

        oninvalid="this.setCustomValidity('Ingresar dirección')"

        oninput="this.setCustomValidity('')"

        class="form-control"

        id="direccion"

        name="direccion"

        placeholder="Escribir la direccion"

        required>

    </div>

    <table width="22%" cellpadding="200px" cellspacing="200px">

        <td><input type="button" class="btn btn-success" value="Agregar fila" onclick="addRow('dataTable');checkNumRows();" /></td>

        <td><input type="button" id="btnBorrar" class="btn btn-danger" value="Eliminar fila(s)" onclick="deleteRow('dataTable');" onmouseover="checkNumRows();" /></td>

        <td><input type="button" value="Contar" onclick="cuentaTodo('dataTable');"></td>

    </table>

    <br>

    <table id="dataTable" class="table table-responsive table-hover table-bordered text-center">

        <tr>

            <th>Seleccionar</th>

            <th>Descripción</th>

            <th>Cantidad</th>

            <th>Precio Unit.</th>

            <th>Precio</th>

        </tr>

        <tr>

            <td><input type="checkbox" name="chk"/></td>

            <td>

            <select class="form-control" id="descripcion" name="descripcion">

            <option selected>Seleccione:</option>

                <?php require 'database_compra.php';

                $querySel = "SELECT * FROM tabla_compra";

                $resultSel = mysqli_query($conexion, $querySel);

                while ($selStock = mysqli_fetch_array($resultSel)) {

                    echo '<option value="'.$selStock["producto"].'">'.$selStock["producto"].'</option>';

                }?>

            </select>

            </td>

            <td><input type="number" class="form-control" id="cantidad" name="cantidad" value="1" min="1"></td>

            <td><input type="number" disabled="disabled" class="form-control" id="precio_unit" name="precio_unit" value=""></td>

            <td><input type="number" disabled="disabled" class="form-control" id="precio_cant" name="precio_cant" value=""></td>

        </tr>

    </table>

    <button type="submit" class="btn btn-primary">Guardar</button>

</form>

function addRow(dataTable) {

   var table = document.getElementById("dataTable");

   var rowCount = table.rows.length;

   var row = table.insertRow(rowCount);

   var cell1 = row.insertCell(0);

   var element1 = document.createElement("input");

   element1.type = "checkbox";

   element1.setAttribute("name", "chk");

   cell1.appendChild(element1);

   var cell2 = row.insertCell(1);

   var element2 = document.createElement("select");

   var opt = document.createElement("option");

   element2.setAttribute('id', 'descripcion');

   element2.setAttribute('name', 'descripcion');

   element2.setAttribute('class', 'form-control');

   opt.appendChild(document.createTextNode('Seleccione:'));

   element2.appendChild(opt);

   var option = document.createElement("option");

   option.setAttribute('value', '.$selStock["producto"].');

   var t = document.createTextNode(".$selStock['producto'].");

   option.appendChild(t);

   document.getElementById("descripcion").appendChild(element2);

   cell2.appendChild(element2);

   var cell3 = row.insertCell(2);

   var element3 = document.createElement("input");

   element3.type = "number";

   element3.setAttribute('class', 'form-control');

   element3.setAttribute('id', 'cantidad');

   element3.setAttribute('name', 'cantidad');

   element3.setAttribute('value', '1');

   cell3.appendChild(element3);

   var cell4 = row.insertCell(3);

   var element4 = document.createElement("input");

   element4.type = "number";

   element4.setAttribute('class', 'form-control');

   element4.setAttribute('id', 'precio_unit');

   element4.setAttribute('name', 'precio_unit');

   element4.setAttribute('disabled', 'disabled');

   cell4.appendChild(element4);

   var cell5 = row.insertCell(4);

   var element5 = document.createElement("input");

   element5.type = "number";

   element5.setAttribute('class', 'form-control');

   element5.setAttribute('id', 'precio_cant');

   element5.setAttribute('name', 'precio_cant');

   element5.setAttribute('disabled', 'disabled');

   cell5.appendChild(element5);

}

var option = document.createElement("option");

   option.setAttribute('value', '.$selStock["producto"].');

   var t = document.createTextNode(".$selStock['producto'].");

   option.appendChild(t);

   document.getElementById("descripcion").appendChild(element2);

<select class="form-control" id="descripcion" name="descripcion" onchange="listar_desc();">

    <option selected>Seleccione:</option>

    <?php include 'database_compra.php';

    $json = json_decode(file_get_contents('php://input'),true);

    if($json['datos']){

        $querySel = "SELECT * FROM tabla_stock ORDER BY id_producto";

        $resultSel = mysqli_query($conexion, $querySel);

        while ($selStock = mysqli_fetch_array($resultSel)) {

            array_push($selStock, array('value', $selStock[1]));

        }

    }

    echo json_encode($selStock,true);

    ?>

</select>

var cell2 = row.insertCell(1);

   var element2 = document.createElement("select");

   var opt = document.createElement("option");

   element2.setAttribute('id', 'descripcion');

   element2.setAttribute('name', 'descripcion');

   element2.setAttribute('class', 'form-control');

   opt.appendChild(document.createTextNode('Seleccione:'));

   element2.appendChild(opt);

   fetch('insertarCom.php', {

     method: 'POST',

     body: JSON.stringify({

       'datos': true

     }),

     headers: {

       'Content-Type': 'application/json'

     }

   })

   .then(res => res.json())

   .then(function(json) {

     for (let i in json) {

          var option = document.createElement("option");

       for (let j in json[i]) {

         //option.value = json[i].value;

         option.text = json[i].text;

         element2.appendChild(option);

       }

     }

   });

   cell2.appendChild(element2);

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">

</head>

<body>

    <!-- Bueno aca el body html, pura paja mas de lo mismo sabes hacerlo -->

  <div class="container">

    <form class="border border-secondary rounded p-4 mt-2 needs-validation" novalidate>

      <div class="row col md-12">

        <div class="col-md-6 mb-3">

          <label for="nombre" class="form-label">Nombre</label>

          <input type="text" class="form-control" id="nombre" name="nombre" required>

          <div class="valid-feedback">Correcto!</div>

          <div class="invalid-feedback">Incluya nombre</div>

        </div>

        <div class="col-md-6 mb-3">

          <label for="fecha" class="form-label">Fecha Compra</label>

          <input type="date" class="form-control" id="fecha" name="fecha" required>

          <div class="valid-feedback">Correcto!</div>

          <div class="invalid-feedback">Incluya fecha</div>

        </div>

        <div class="col-md-10 mb-3">

          <label for="direccion" class="form-label">Direccion</label>

          <textarea class="form-control" id="direccion" name="direccion" rows="3" required></textarea>

          <div class="valid-feedback">Correcto!</div>

          <div class="invalid-feedback">Incluya direccion</div>

        </div>

        <div class="col-md-2 mt-5">

          <button class="btn btn-primary" type="submit">Guardar</button>

        </div>

      </div>

    </form>

    <div class="table-responsive tabla mt-3">

      <h1 class="text-center text-primary text-uppercase">Cargue productos a la compra</h1>

      <table class="table table-bordered">

        <thead>

          <tr>

            <th scope="col" class="text-center">AGREGA</th>

            <th scope="col">PRODUCTO</th>

            <th scope="col">DESCRIPCION</th>

            <th scope="col" style="text-align:right;">CANTIDAD</th>

            <th scope="col" style="text-align:right;">PRECIO</th>

            <th scope=" col" style="text-align:right;">TOTAL</th>

            <th scope="col" class="text-center">BORRA</th>

          </tr>

        </thead>

        <tbody></tbody> <!-- aca dejo el tbody vacio solo comentado -->

        <tfoot>

          <tr>

            <th colspan="6" style="text-align:right;">TOTAL : <span class="total">0.00</span></th>

          </tr>

        </tfoot>

      </table>

    </div>

  </div>

  <script>

    // declaro constantes

    const tfoot = document.querySelector('tfoot'); //el foot de la tabla

    const table = document.querySelector('tbody');  //el tbody de la tabla

    const td_datos = []; //el array donde guardare lo que recoja del reccorido de la tabla

    var frm_datos; //el formdata para enviar a la pagina productos

    // esta instruccion lee el dom y justo al cargar ejecuta lo que se le indique

    document.addEventListener('DOMContentLoaded', function() {

      AddFila(); // la funcion para agregar filas a la tabla dinamica

    });

    function AddFila() {

      let num = table.rows.length + 1; //como ya declare la tabla arriba ahora enumero las filas que vaya creando

      var td = []; // en este array voy agregado columnas

      var row = table.insertRow(0); //inserto la fila

      for (var j = 0; j < 7; j++) {

        td[j] = row.insertCell(j); //en este bucle le indico cuantas columnas crear

      }

      //aca le voy dando cuerpo a las columnas o celdas

      //fijate que siguiendo el numero puedo decidir que clase darle, id, write, etc

      td[0].innerHTML = '<span onclick="AddFila();"><span class="icon"><i class="bi bi-plus-circle fs-5 text-primary" role="button"></i></span></span>';

      td[0].classList.add('text-center');

      //muy importante para que javascript no se lie al hacerle peticiones le agrego un id numerico

      // y aqui creo tu bendito select jeje

      td[1].innerHTML = '<select id="select_' + num + '" class="form-select" onchange="descripcion(this);"></select>';

      td[2].classList.add('descripcion');

      //fijate como hago uso del id numerico para indicarle a javascript donde debe atacar

      let select = document.querySelector('#select_' + num);

      //finalmente hago la peticion fecth a la pagina productos para extraer de ella los options

      fetch('productos.php', {

          method: 'POST',

          body: JSON.stringify({

            'solicitud': true

          }),

          headers: {

            'Content-Type': 'application/json' //el encabezado se lo envio como json y asi mismo debo recibirlo en php

          }

        })

        .then(res => res.json()) //le indico que deseo la promesa en formato json

        .then(function(json) { //finalmente php la devuelve

          for (let i in json) { //como viene en json la recorro para extraer su contenido

            var option = document.createElement("option"); //creo un elemento option

            for (let j in json[i]) {

              option.value = json[i].value; //como se la forma en que arme mi json en php, simplemente le indico el nombre del index

              option.text = json[i].text;

              select.appendChild(option); //finalmente se lo agrego al select con id numerico

            }

          }

        });

        //mas de lo mismo

      td[3].innerHTML = '<input class="cantidad form-control" style="text-align:right" type="number" onchange="calc(this);" id="cantidad_' + num + '" />';

      td[3].style.width = "200px";

      td[4].innerHTML = '<input class="precio form-control" style="text-align:right" type="number" onchange="calc(this);" id="precio_' + num + '" />';

      td[4].style.width = "200px";

      td[5].innerHTML = '0.00';

      td[5].classList.add('sub');

      td[5].style.textAlign = 'right';

      td[6].innerHTML = '<span onclick="borra(this);"><span class="icon"><i class="bi bi-trash fs-5 text-danger ml-3" role="button"></i></span></span>';

      td[6].classList.add('text-center');

    }

    //fijate que cuando select cambia llamo a esta funcion

    function descripcion(este) { // this es el elemento

      let node = este.parentNode.parentNode.childNodes; //conociendo el elemento armo toda la fila para organizarme e ir decidiendo donde actuar

      var descripcion;

      var precio;

      //hago lo mismo mediante fetch solicito informacion

      fetch('productos.php', {

          method: 'POST',

          body: JSON.stringify({

            'descripcion': este.value //aca le envio el valor del select para poder extraer su descripcion y precio

          }),

          headers: {

            'Content-Type': 'application/json'

          }

        })

        .then(res => res.json()) //igual que el anterior

        .then(function(json) {

          for (let i in json) { //recorro y guardo en variables lo que me traiga de vuelta

            for (let j in json[i]) {

              descripcion = json[i].descripcion;

              precio = json[i].precio;

            }

          }

        });

      setTimeout(() => {

      //debo crear un tiempo porque fecth es asincronico (osea no trabaja por bloques y si no hago tiempo, la siguiente instruccion pasa volando y crea un null)

        for (let i = 0; i < node.length; i++) { //como organice mi fila puedo actuar

          let ItemNode = node.item(i); //voy recorriendo uno a uno las columnas de la fila

          if (ItemNode.className == "descripcion") { //me detengo en esta clase

            ItemNode.innerHTML = descripcion; // y le pinto la descripcion

            ItemNode.nextSibling.nextSibling.lastChild.value = precio; //aprovecho y coloco en precio al input

            ItemNode.nextSibling.lastChild.focus(); // y le paso  el foco a cantidad

            //todo esto lo hacemos mediante parentNode y como te comente ordeno las fila en un solo nodo

            //y como conozco la estructura de mi tabla simplemente me muevo con las propiedades del nodo

          }

        }

      }, 100);

    }

   //esta funcion es identica a la anterior, la uso para calcular el total

    function calc(este) {

      let node = este.parentNode.parentNode.childNodes;

      var total;

      for (let i = 0; i < node.length; i++) {

        let ItemNode = node.item(i);

        if (ItemNode.className == "descripcion") {

          let precio = parseFloat(ItemNode.nextSibling.nextSibling.lastChild.value);

          let cantidad = parseFloat(ItemNode.nextSibling.lastChild.value);

          total = precio * cantidad;

        }

        if (ItemNode.className == "sub") {

          ItemNode.innerHTML = parseFloat(total).toFixed(2);

        }

      }

      suma_tfood();

    }

   // por aqui recorro la columna total y voy sumando lo que encuentre

    function suma_tfood() {

      let tfoot_sub = document.querySelector('.total');

      var suma = 0;

      document.querySelectorAll(".sub").forEach(function(el) {

        suma += Number(el.innerHTML);

      });

      tfoot_sub.innerHTML = parseFloat(suma).toFixed(2);

    }

    // con esta funcion borro la fila

    // fijate que igual creo un nodo para orientarme

    function borra(este) {

      let a = este.parentNode.parentNode.rowIndex;

      document.querySelector("table").deleteRow(a);

      suma_tfood();

      if (table.rows.length == 0) {

        AddFila()

      }

    }

    // tu dolor de cabeza el json

    // es muy sencillo

    function TableJson() {

      // deleteArray();  //por si acaso deseas borrar el json

      document.querySelectorAll("tbody tr").forEach(function(el) { //recorro toda la tabla de arriba a abajo

        let node = el.childNodes; //vuelvo a crear el nodo

        item = {}; //preparo el json

        for (let i = 0; i < node.length; i++) { //me hago un bucle para seleccionar que deseo grabar al json

          if (node.item(i).className == 'descripcion') {

            item['descripcion'] = node.item(i).innerHTML; //aca voy agregando a la variable lo que yo considero necesario

          }

          // como no todas las columnas tienen id, le indico a la condicional que solo deje pasar las que no sean indefinidas

          if (node.item(i).childNodes[0].id != undefined) {

            switch (explode(node.item(i).childNodes[0].id, '_', 0)) {

              case 'precio':

                item['precio'] = node.item(i).childNodes[0].value; //agrego

                break;

              case 'cantidad':

                item['cantidad'] = node.item(i).childNodes[0].value; //agrego

                break;

              case 'select':

                item['select'] = node.item(i).childNodes[0].value; //agrego

                break;

            }

          }

        }

        td_datos.push(item); //finalmente lo gurado el json en esa variable que mas tarde usare

      });

    }

    function explode(texto, caracter, parte) { //aca es una funcion para leer partes

      var extrae = texto.split(caracter);

      return extrae[parte].trim();

    }

    // function deleteArray(){

    //   for (var i = td_datos.length-1; i >= 0; i--) {

    //      td_datos.splice(i, 1);

    //   }

    // }

    (() => { //esto es para validar el form (bootstrap lo tiene)

      'use strict';

      const frm = document.querySelector('.needs-validation'); //aca me traigo todo el form

      const forms = document.querySelectorAll('.needs-validation'); //aca preparo para que recorra el form

      const boton = document.querySelector('.btn-primary'); //esto es una pendejera para que me cree el efecto spinner

      Array.prototype.slice.call(forms).forEach((form) => {

        form.addEventListener('submit', (e) => { //si no se cumple los datos del form detiene (bootstrap)

          if (!form.checkValidity()) {

            e.preventDefault();

            e.stopPropagation();

          } else {

            //al pasar le cambio el boton a spinner

            boton.innerHTML='Enviando...<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';

            frm_datos = new FormData(frm); //agrego todo lo que este en el form a un formdata

            e.preventDefault();

            TableJson(); //llamo la funcion que me crea el Json

            // IMPORTANTE

            // fijate como le agrego a formdata el Json de la tabla

            frm_datos.append('td_datos', JSON.stringify(td_datos));

            fetch('productos.php', { //vualvo a fetch

                method: 'POST',

                body: frm_datos //fijate que le envio toda la variable formdata (hay va todo)

                //otra cosa ya no le digo que lo envio como json, si no como POST normal

              })

              .then(res => res.text()) //le indico que deseo recibir la promesa en texto

              .then(function(text) {

                if (text == 'ok') location.reload(); //si todo salio bien recargo la pagina

              });

          }

          form.classList.add('was-validated');

        }, false);

      });

    })();

    //te preguntaras porque aveces uso var y otras veces let

    //pues porque let se destruye al terminar su ejecucion en una funcion y puedo usar la misma variable en otra funcion

  </script>

</body>

</html>