Повторяющиеся входные данные при добавлении с использованием jQuery

Вот код:

    <form class = "ui form attached fluid loading segment" onsubmit = "return contact(this)">
    <div class = "field">
    <label>Preferred Tour</label>
        <div class = "field">
          <?php
            $conn=mysqli_connect('####','####','####','####');

            echo '<select required id = "tourInfo">';
            echo '<option value = "" selected disabled>--Preferred Tour--</option>';
            $db = mysqli_query($conn, "SELECT `id`,`tourprice`,`tourname` FROM `available_tours`");
            while ($d=mysqli_fetch_assoc($db)) {
              
              echo "<option value = ".$d['id']." id = ".$d['tourname']. " data-price = ".$d['tourprice'].">".$d['tourname']."</option>";
            
            }
              
            echo "</select>";
          ?>
        </div>   
    </div>
    <div class = "field" id = "hiddenTortu" style = "display: none;"> 
    <label>Attention</label> 
        <div class = "ui icon">
          <p><b>The minimum of people for this tour is 5, less than 5 the tour is not realisable</b></p>
        </div>
    </div>
    <div class = "field">  
      <label>Available Time</label>
      <div class = "field">
        <?php
          $conn=mysqli_connect('####','####','####','####');

          echo '<select name = "gender" required id = "timeInfo">';
          echo '<option value = "" selected disabled>--Preferred Time--</option>';
          $db = mysqli_query($conn, "SELECT `time_real` FROM `available_time`");
          while ($d=mysqli_fetch_assoc($db)) {
            echo "<option value = ".$d['time_real'].">".$d['time_real']."</option>";
          }
            
          echo "</select>";
        ?>
      </div>
    </div>
  <div class = "two fields"> 
      <div class = "field" id = "pax"> 
          <label>Please specify the number of People according to the perred tour selection</label>

Здесь начинается проблема со следующим сценарием в соответствии с выбором тура. Я пытаюсь установить минимум и максимум, чтобы пользователь не мог выбрать больше номеров для людей в туре.

Проблема в том, что когда пользователь сначала выбирает один вариант, а затем понимает, что лучший вариант - другой, когда он / она делает другой выбор, ввод, созданный с помощью jQuery, который был добавлен, остается, и из-за нового выбора создается новый ввод .

Намерение состоит в том, что если пользователь выбирает вариант 1, добавление ввода появляется в соответствии с вариантом один, но если пользователь сожалеет и предпочитает вариант 2, вход для варианта 1 исчезает и появляется новый вход в соответствии с вариантом 2, и так далее для все, если условия.

          <script>
                $(document).ready(function(){
                  $('#tourInfo').on('change', function() {
                    if ( this.value == '1')
                    {
                      $("#pax").append($('<input placeholder = "Number of People" type = "number" id = "peopleInfo" min = "1" max = "2"  value = "1" required>'));
                                  (function ($) {
                          $.fn.restrict = function () {
                              return this.each(function(){
                                  if (this.type && 'number' === this.type.toLowerCase()) {
                                      $(this).on('change', function(){
                                          var _self = this,
                                              v = parseFloat(_self.value),
                                              min = parseFloat(_self.min),
                                              max = parseFloat(_self.max);
                                          if (v >= min && v <= max){
                                              _self.value = v;
                                          }
                                          else {
                                              _self.value = v < min ? min : max;
                                          }
                                      });
                                  }
                              });
                          };
                      })(jQuery);

                      $('#peopleInfo').restrict();

                    }
                    else if (this.value == '2')

                      $("#pax").append($('<input placeholder = "Number of People" type = "number" id = "peopleInfo" min = "3" max = "5"  value = "3" required>'));
                                  (function ($) {
                          $.fn.restrict = function () {
                              return this.each(function(){
                                  if (this.type && 'number' === this.type.toLowerCase()) {
                                      $(this).on('change', function(){
                                          var _self = this,
                                              v = parseFloat(_self.value),
                                              min = parseFloat(_self.min),
                                              max = parseFloat(_self.max);
                                          if (v >= min && v <= max){
                                              _self.value = v;
                                          }
                                          else {
                                              _self.value = v < min ? min : max;
                                          }
                                      });
                                  }
                              });
                          };
                      })(jQuery);

                      $('#peopleInfo').restrict();
                    }
                    else if (this.value == '3')
                    {
                      $("#pax").append($('<input placeholder = "Number of People" type = "number" id = "peopleInfo" min = "6" max = "15"  value = "6" required>'));
                                  (function ($) {
                          $.fn.restrict = function () {
                              return this.each(function(){
                                  if (this.type && 'number' === this.type.toLowerCase()) {
                                      $(this).on('change', function(){
                                          var _self = this,
                                              v = parseFloat(_self.value),
                                              min = parseFloat(_self.min),
                                              max = parseFloat(_self.max);
                                          if (v >= min && v <= max){
                                              _self.value = v;
                                          }
                                          else {
                                              _self.value = v < min ? min : max;
                                          }
                                      });
                                  }
                              });
                          };
                      })(jQuery);
                      $('#peopleInfo').restrict();
                    }...
                    
                              ...});
                          };
                      })(jQuery);

                      $('#peopleInfo').restrict();
                    }
                  });
            });
        </script>
      </div> 
      <div class = "field"> 
          <label><br>Date of Tour</label>
          <input type = "text" readonly required id = "tourDate" class = "datepicker-here form-control" placeholder = "ex. August 03, 1998">
      </div>  
  </div>
  <div style = "text-align:center">
    <div>
      <label>Ensure all details have been filled correctly</label>
    </div>
    <button class = "ui green submit button">Submit Details</button>
  </div> 
</form>
</div>