Добавьте переменную для ввода рядом с флажком (событие onchange), где таблица отображается из «while»

Question

Пользователь должен сначала выбрать дату, я получаю значение из этого ввода.Часть ниже, это список из MySQL, который выглядит следующим образом: Имя / Флажок / Ввод даты ", где при нажатии / изменении флажка для любого из Имен" ввод даты "изменится на ту же дату из первой части, такчто это может быть позже сохранено в БД.

$('.boton').change(function() {
  var fechai1 = $('#fechai').val();
  var fechaf1 = $('#fechaf').val();
  var horai = $('#horai').val();
  var horaf = $('#horaf').val();
  $('#fechai-cambio').val(fechai1);
  $('#fechaf-cambio').val(fechaf1);
  $('#horai-cambio').val(horai);
  $('#horaf-cambio').val(horaf);

  var fechai = new Date(fechai1);
  var month = fechai.getUTCMonth() + 1;
  var day = fechai.getUTCDate();
  var year = fechai.getUTCFullYear();
  var newdate = year + "-" + month + "-" + day;

  var fechaf = new Date(fechaf1);
  var month1 = fechaf.getUTCMonth() + 1;
  var day1 = fechaf.getUTCDate();
  var year1 = fechaf.getUTCFullYear();
  var newdate1 = year1 + "-" + month1 + "-" + day1;

  var fechaI = new Date(newdate)
  var fechaF = new Date(newdate1)

  var difM = fechaF - fechaI // diferencia en milisegundos
  var difD = difM / (1000 * 60 * 60 * 24) // diferencia en dias

  console.log(difD)

  $('#dias').val(difD);


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for='cantp'>Cantidad de Personas</label > 
            <input type='text' id='cantp' name='cantp' readonly value=''>
        <label for='razon' >Fecha Inicio</label>
<input type='date' id='fechai' name='fechai' class='fechai'>
<label for='fechaf'>Fecha Fin</label>
<input type='date' id='fechaf' name='fechaf'>
<label for='horai'>Hora inicio</label>
<input type='time' id='horai' name='horai'>
<label for='horaf'>Hora Fin</label>
<input type='time' id='horaf' name='horaf'>
<br>

<tr>
  <td>elimar carrasquero</td>
  <td class="text-center"><input class="boton" type="checkbox" id="checkbox" name="checkbox" value="1"></td>
  <td><input type="date" id="fechai-cambio" name="fechai-cambio" class="fecicamb"></td>
  <td><input type="date" id="fechaf-cambio" name="fechaf-cambio" class="fecfcamb"></td>
  <td><input type="time" id="horai-cambio" name="horai-cambio"></td>
  <td><input type="time" id="horaf-cambio" name="horaf-cambio"></td>
  <td><input style="width:20px;" readonly id="dias"></td>
</tr>
<tr>
  <td>carla romero</td>
  <td class="text-center"><input class="boton" type="checkbox" id="checkbox" name="checkbox" value="2"></td>
  <td><input type="date" id="fechai-cambio" name="fechai-cambio" class="fecicamb"></td>
  <td><input type="date" id="fechaf-cambio" name="fechaf-cambio" class="fecfcamb"></td>
  <td><input type="time" id="horai-cambio" name="horai-cambio"></td>
  <td><input type="time" id="horaf-cambio" name="horaf-cambio"></td>
  <td><input style="width:20px;" readonly id="dias"></td>
</tr>
<tr>
  <td>jesus acosta</td>
  <td class="text-center"><input class="boton" type="checkbox" id="checkbox" name="checkbox" value="3"></td>
  <td><input type="date" id="fechai-cambio" name="fechai-cambio" class="fecicamb"></td>
  <td><input type="date" id="fechaf-cambio" name="fechaf-cambio" class="fecfcamb"></td>
  <td><input type="time" id="horai-cambio" name="horai-cambio"></td>
  <td><input type="time" id="horaf-cambio" name="horaf-cambio"></td>
  <td><input style="width:20px;" readonly id="dias"></td>
</tr><button id='btn_form' type='button' onclick='realizaGrupo()'>Grabar</button> </form>
</article>

Answer 1

Я думаю, что это должно вывести вас на правильный путь

// Identify HTML elements
const container = document.querySelector("#container");
const dateSource = document.querySelector("#dateSource");

// Listen for clicks inside parent container
container.addEventListener("click", pasteDate);

// Update the date in the same row when the checkbox is clicked
function pasteDate(event){
  if(event.target.checked){
    event.target.nextSibling.value = dateSource.value;
  }
  else{
    event.target.nextSibling.value = "";
  }
}

<div id="container">
  <input id="dateSource" type="date" value="2019-04-01" />
  <div>
    <input type="checkbox" /><input type="date" />
  </div>
  <div>
    <input type="checkbox" /><input type="date" />
  </div>
</div>