Обновите значение переменной, когда добавление ограничено одним

Question

Я пытаюсь обновлять значение добавленного элемента списка после каждого клика.Это значение из опции выбора, после каждого щелчка оно добавляет значение к ul .Моя проблема в том, что мне нужно было только добавить значение 1 раз, чтобы другое добавленное значение не отображалось.Следует просто обновить уже добавленное значение.

var standard = 0;
var n_standard = 0;
function standardRoom() {
    n_standard = n_standard + Number($("#selectBoxStandard").val());
    standard++
    if (standard <= 1 ) {
        $("#roomDetail ul").append('<li class="hr">Number of room(s): '+ n_standard +'</li>');
    }
}

<label for="rooms" style="color:black">No. of rooms: </label>
  <select required tabindex="10" id="selectBoxStandard" name="n_rooms"> 
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select>

<div  class="button-style-1" style="padding-bottom:80px" style="padding-bottom:40px"><a href="javascript:standardRoom()" ><i class="fa fa-calendar"></i><span class="mobile-visibility">BOOK</span></a></div>

<div id="roomDetail">
  <ul class="tabs">

   </ul>
 </div>

Answer 1

Вместо append используйте .html и, когда вызывается function, отмечайте counter(standard) в 0 после каждого вызова функции, чтобы печатать снова.Когда ему не присваивается значение 0 при каждом клике, его значение будет увеличиваться, и вы всегда получите результат

var standard = 0;
var n_standard = 0;
function standardRoom() {
    n_standard = n_standard + Number($("#selectBoxStandard").val());
    standard++
    if (standard <= 1 ) {
        $("#roomDetail ul").html('<li class="hr">Number of room(s): '+ n_standard +'</li>')
        standard=0;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="rooms" style="color:black">No. of rooms: </label>
  <select required tabindex="10" id="selectBoxStandard" name="n_rooms"> 
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select>

<div  class="button-style-1" style="padding-bottom:80px" style="padding-bottom:40px"><a href="javascript:standardRoom()" ><i class="fa fa-calendar"></i><span class="mobile-visibility">BOOK</span></a></div>

<div id="roomDetail">
  <ul class="tabs">

   </ul>
 </div>

Answer 2

Если вы хотите добавить текст внутри последней <li> в списке, вы можете использовать:

let items = document.querySelectorAll("ul.tabs > li");
items[items.length - 1].innerHTML += "add this text";