CloneNode if all the fields input is filled in still cloning when fields are not filled in

Question

I would like my button not to clone my field if all the fields input and selected box are not filled in.

HTML

<fieldset id="schedule-items">
        <legend>Horários disponíveis 
            <button type="button" id="add-time" onclick="addButton()">+Novo horário</button>
        </legend>
        <div class="schedule-item">
            <div class="select-block">
                <label for="weekday">Dia da semana</label>
                <select name="weekday[]" required="true">
                    <option id="select" value="select" selected>Selecione uma opção</option>
                    {%for weekday in weekdays %}
                    <option value="{{loop.index0}}">{{weekday}}</option>
                    {%endfor%}
                </select>
            </div>
            <div class="input-block">
                <label for="time_from">Das</label>
                <input type="time" name="time_from[]" required>
            </div>
            <div class="input-block">
                <label for="time_to">Ate</label>
                <input type="time" name="time_to[]" required>
            </div>
        </div>
    </fieldset>
</form>

JS

function cloneField(){
    const newFieldContainer = document.querySelector(".schedule-item").cloneNode(true)
    let fields = newFieldContainer.querySelectorAll('input')
    fields.forEach(function(field){
        field.value = ""
    })
    document.querySelector("#schedule-items").appendChild(newFieldContainer)
  
}

function addButton(){
    const selected = document.getElementById('select').selected
    console.log(selected)
    const scheduleItems = document.querySelector('#schedule-items')
    console.log(scheduleItems)
    let inputs = scheduleItems.querySelectorAll('input')
    inputs.forEach(function(input){
        if(selected == true || input.value == ""){
            alert('Please select a day and time of the week')
        }else{
            let button = document.querySelector("#add-time")
            button.addEventListener('click',cloneField)
    }   
    })
    }
          

At the moment it's giving me the alert message when I try to click the button first time but once cloned the second field clones even though I am requiring all the fields input to be filled in and a certain selection.

Answer 1

You can use Array#some to iterate over all the elements and check if any of them are not filled in, instead of checking only the first one as you are currently doing.

if(!selected || [...inputs].some(input=>input.value==='')){
    alert('Please select a day and time of the week')
} else {
    let button = document.querySelector("#add-time")
    button.addEventListener('click',cloneField)
}