Кнопка подтверждения рядом с загружаемым файлом и выбранной опцией

Question

Я хочу спросить, а что если я выберу «не выполнено» и «недоступно» на выбранной кнопке, тогда следующая кнопка может быть запущена в следующую форму. Между тем, если вы выберете «Согласованный» и «Несогласованный», вы должны сначала заполнить файл загрузки, затем следующая кнопка может перейти к следующей форме.

<section id="portfolio" class="portfolio">
  <div class="container">
    <div class="section-title">
      <h2 data-aos="fade-up">Questionnaire</h2>
    </div>

    <form id="regForm" action="../cek.php" method="post" enctype="multipart/form-data">
      <h2>Questionnaire</h2>


     <?php
     $query = mysqli_query($con, "SELECT * FROM `question`");
     $no1=1;
     $no2=1;
     $no3=1;
     $no4=1;
     $no5=1;
     $no6=1;

     while($data = mysqli_fetch_array($query)){

      ?>
      <div class="tab">       
        <p><input type="text" name="idquestion<?php echo $no1++; ?>" class="form-control" value="<?php echo $data['id']; ?>" readonly ></p>
        <p><input type="text" name="nip<?php echo $no2++; ?>" class="form-control" value="<?php echo $nip; ?>"  readonly ></p>
        <p><input type="text" name="idcabang<?php echo $no3++; ?>" class="form-control" value="<?php echo $idcabang; ?>"  readonly ></p>
        <p> <textarea type="text" id="question" name="question<?php echo $no4++; ?>" class="form-control" value="" style="height: 150px; width: 700px" readonly><?php echo $data['question']; ?></textarea></p>

        <p><label class="font-weight-bold" for="fullname">Jawaban </label>
          <select class="custom-select" name="jawaban<?php echo $no5++; ?>" id="mySelect<?php echo $data['id']; ?>" required >

            <option value="" >--Select--</option>

            <option value="Konsisten">Konsisten</option>
            <option value="Tidak Konsisten">Tidak Konsisten</option>
            <option value="Tidak Dilakukan">Tidak Dilakukan</option>
            <option value="Tidak Tersedia">Tidak Tersedia</option>
          </select></p>
          <p>
            <div class="col-md-14 mb-3 mb-md-0" id="btnHide<?php echo $data['id']; ?>" style="display: none;" >


              <label class="font-weight-bold" for="fullname">Upload Dokumen</label>
              <!-- <p><input type="file"  name="file[]" multiple></p> -->
               <input type="file" name="upload<?php echo $no6++; ?>" id="unggah" class="form-control"  multiple required />



            </div>
          </p>
        </div>


        <script src="https://code.jquery.com/jquery-3.3.1.js"></script> 
        <script>


          $(function () {
            $("#mySelect<?php echo $data['id']; ?>").change(function () {
              if ($(this).val() == "Konsisten") {
                $("#btnHide<?php echo $data['id']; ?>").show();
              } else if ($(this).val() == "Tidak Konsisten") {
                $("#btnHide<?php echo $data['id']; ?>").show();
              } else if ($(this).val() == "Tidak Dilakukan") {
                $("#btnHide<?php echo $data['id']; ?>").hide();
              } else if ($(this).val() == "Tidak Tersedia") {
                $("#btnHide<?php echo $data['id']; ?>").hide();
              } else {
                $("#btnHide<?php echo $data['id']; ?>").hide();
              }
            });
          });
        </script>



      <?php } ?>

    </div>

    <?php
    $ct = mysqli_query($con, "SELECT COUNT(*) as total FROM `question`");
    $data_ct = mysqli_fetch_assoc($ct);
    ?>
    <input type="hidden" name="jumlah" value="<?php echo $data_ct['total']; ?>">

    <div style="overflow:auto;">
      <div style="float:right;">
        <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
        <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
      </div>
    </div>
    <!-- Circles which indicates the steps of the form: -->
    <div style="text-align:center;margin-top:40px;">
      <?php
      $query_step = mysqli_query($con, "SELECT * FROM `question`");
      while($data_step = mysqli_fetch_array($query_step)){
        ?>
        <span class="step"></span>
      <?php } ?>
    </div>

  </form>

<script>
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab

function showTab(n) {
  // This function will display the specified tab of the form...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  //... and fix the Previous/Next buttons:
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Submit";
  } else {
    document.getElementById("nextBtn").innerHTML = "Next";
  }
  //... and run a function that will display the correct step indicator:
  fixStepIndicator(n)
}

function nextPrev(n) {
  // This function will figure out which tab to display
  var x = document.getElementsByClassName("tab");
  // Exit the function if any field in the current tab is invalid:
  if (n == 1 && !validateForm()) return false;
  // Hide the current tab:
  x[currentTab].style.display = "none";
  // Increase or decrease the current tab by 1:
  currentTab = currentTab + n;
  // if you have reached the end of the form...
  if (currentTab >= x.length) {
    // ... the form gets submitted:
    document.getElementById("regForm").submit();
    return false;
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);
}

function validateForm() {
  // This function deals with validation of the form fields
  var x, y, i, a, valid = true;
  //var a, valid = false;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("select");
  //y = x[currentTab].getElementsByTagName("input");
  //a = x[currentTab].getElementsByTagName("input")
  a = x[currentTab].getElementsByTagName("input");
  // A loop that checks every input field in the current tab:
 
  
        for (i = 0; i < a.length && i< y.length; i++) {
          if ( a[i].value == "")
          {

           //y[i].className += " invalid";
           a[i].className += " invalid";
           valid = false;
         }
         elseif (y[i].value == "") {
          y[i].className += " invalid";
          a[i].className += " invalid";

           //a[i].className += " invalid";
           valid = false;
         }
      
      }
  
    

   
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // return the valid status
}

function fixStepIndicator(n) {
  // This function removes the "active" class of all steps...
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //... and adds the "active" class on the current step:
  x[n].className += " active";
}
</script>

HTML

HTML 1

Javascript

Javascript

Javascript