While Checking Checkbox Value Is Increasing Or Decreasing But It Works For Only One Check Box, In Should Work For Every Checkbox( Plain Javascripr)

Please see this image it is working for only one checkbox but i want to work for every check box because id is same as 1st checkbox Here is my code:

Solution 1:

In html you use the same id for all inputs - this is not valid for html! Each item must have a unique id. I removed all id from your input using the class for reversal in the js code.

Also, your second iputs with the number also had the same id. This is also a mistake. I replaced with class. Like this:

class="get-radio-input-number"

Now by the code js... I wrote the logic for displaying the value in the input, using the forEach() method, which identifies the inputs by the [index] parameter.

window.onload = function() {
let getRadioOptionsNumberCheck = document.querySelectorAll('.input-checkbox');
let getRadioInputNumber = document.querySelectorAll('.get-radio-input-number');

  getRadioOptionsNumberCheck.forEach(function(current, index) {
    current.addEventListener('click', function() {

      if (current.checked) {
        getRadioInputNumber[index].value = 1;
      } 
      else
      {
        getRadioInputNumber[index].value = 0;
      }  

    });
  });
}

<div class="modal-content"><span class="close" onclick="closeModal();">&times;</span>
    <div class="model-layout">
        <p>Enter question</p>
        <form onsubmit="return false;" autocomplete="off">
            <div class="form-group"><input type="text" id="radio-input" class="form-control" placeholder="Question"
                    required autofocus></div>
            <p>Enter Your Option and Points</p>
            <div class="form-group" id="divFectchAllQuestion">
                <div><input type="checkbox" class="input-checkbox" name="checkCheckbox"><input type="text"
                        placeholder="Enter your option" class="form-control-range-number1" id="get-radio-input1"
                        name="get-radio-input" value=""><input type="number" class="get-radio-input-number" value="0"
                        name="get-radio-input" /><button type="click" onclick="addMoreOptions(this)"><i
                            class="fa fa-plus-circle" aria-hidden="true"></i></button><button type="button" disabled><i
                            class="fa fa-minus-circle" aria-hidden="true"></i></button></div>
                <div><input type="checkbox" class="input-checkbox" name="checkCheckbox"><input type="text"
                        placeholder="Enter your option" class="form-control-range-number" id="get-radio-input"
                        name="get-radio-input"><input type="number" class="get-radio-input-number" value="0"
                        name="get-radio-input" /><button type="click" onclick="addMoreOptions(this)"><i
                            class="fa fa-plus-circle" aria-hidden="true"></i></button><button type="click"
                        onclick="removeOptions(this)"><i class="fa fa-minus-circle" aria-hidden="true"></i></button>
                </div>
                <div><input type="checkbox" class="input-checkbox" name="checkCheckbox"><input type="text"
                        placeholder="Enter your option" class="form-control-range-number1" id="get-radio-input3"
                        name="get-radio-input"><input type="number" class="get-radio-input-number" value="0"
                        name="get-radio-input" /><button type="click" onclick="addMoreOptions(this)"><i
                            class="fa fa-plus-circle" aria-hidden="true"></i></button><button type="click"
                        onclick="removeOptions(this)"><i class="fa fa-minus-circle" aria-hidden="true"></i></button>
                </div>
                <div><input type="checkbox" class="input-checkbox" name="checkCheckbox"><input type="text"
                        placeholder="Enter your option" class="form-control-range-number1" id="get-radio-input4"
                        name="get-radio-input"><input type="number" class="get-radio-input-number" value="0"
                        name="get-radio-input" /><button type="click" onclick="addMoreOptions(this)"><i
                            class="fa fa-plus-circle" aria-hidden="true"></i></button><button type="click"
                        onclick="removeOptions(this)"><i class="fa fa-minus-circle" aria-hidden="true"></i></button>
                </div>
            </div><label for="radio-group-required"><input type="checkbox" class="input-checkbox"
                    id="radio-group-required">Make this question compulsory</label>
            <div class="select-page form-group">
                <p>Select Page</p><select id="line-page-no" name="line-page-no"
                    class="page-options form-control"></select>
            </div>
            <div class="form-group"><input type="submit" class="submit-button" value="Submit"
                    onclick="addRadioGroup();"></div>
        </form>
        <p id="radio-error-message"></p>
    </div>
</div>