How to change input value within div with Avascript

Question

I’ve even managed to change an input inside the div, but when I try to change the input of other div I can’t, I’ve tried several things and nothing.

div1

<div class="container">
                <div class="row">
                    <div class="col-xs-3 col-xs-offset-3">
                        <div class="input-group number-spinner">
                            <span class="input-group-btn">
                                <button class="btn btn-default" data-dir="dwn"><i class="fas fa-minus"></i><span class="glyphicon glyphicon-minus"></span></button>
                            </span>
                            <input type="text" class="form-control text-center" value="0" style="max-width:50px;">
                            <span class="input-group-btn">
                                <button class="btn btn-default" data-dir="up"><i class="fas fa-plus"></i><span class="glyphicon glyphicon-plus"></span></button>
                            </span>                         
                        </div>                      
                    </div>
                </div>
            </div>

div2

<div class="md-form mb-5" style="display: flex; flex-flow: row wrap; justify-content: space-between;">
        <div id="number-spinner1" style="width: 45%;">
            <i class="fab fa-btc"></i>
            <label data-error="wrong" data-success="right" for="defaultForm-email">Price:</label>
            <input type="name" name="building_ppv" class="form-control validate" id="ppv" disabled>
        </div>
        <div id="number-spinner2" style="width: 45%;">
            <i class="fab fa-btc"></i>
            <label data-error="wrong" data-success="right" for="defaultForm-email">Total:</label>
            <input type="name" name="building_total" class="form-control validate" id="total" disabled>
        </div>
    </div>

div 3

<?php echo form_open(site_url("account/buy_building/"), array("" => "")) ?>
            <input type="hidden" name="building_view" value="0" id="building_view">
            <button type="submit" class="btn btn-dark btn-bordered" style="margin-top:20px"> <i class="fa fa-check-circle"></i> Save</button>
        <?php echo form_close(); ?>

Script

$(document).on('click', '.number-spinner button', function () {    
    var btn = $(this),
        oldValue = btn.closest('.number-spinner').find('input').val().trim(),
        newVal = 0;

    if (btn.attr('data-dir') == 'up') {
        newVal = parseInt(oldValue) + 1;
    } else {
        if (oldValue > 1) {
            newVal = parseInt(oldValue) - 1;
        } else {
            newVal = 1;
        }
    }

    document.getElementById('building_view').value = newVal;
    btn.closest('.number-spinner').find('input').val(newVal);

    var ppv = 0 , total = 0;

    if(newVal>9999){
        ppv = 50;
        total=newVal*ppv;       
    }else if(newVal>4999){
        ppv = 60;
        total=newVal*ppv;       
    }else if(newVal>999){
        ppv = 70;
        total=newVal*ppv;       
    }else if(newVal>499){
        ppv = 80;
        total=newVal*ppv;       
    }else if(newVal>99){
        ppv = 90;
        total=newVal*ppv;       
    }else if(newVal<=99){
        ppv = 100;
        total=newVal*ppv;       
    }

    document.getElementById('ppv').value = ppv;
    document.getElementById('total').value = total;
});

In case I can’t change the input with id ppv and total

Edit#1: I don’t know if there’s anything to it, but these Divs are inside a foreach (they’re created several times), is that the id? If that’s how I handle it?

Edit#2: The only thing q I don’t understand is q if it’s the id, I wanted to know how the script can put the value inside the input of div1, but can’t put it inside the div2, and look q tried a lot

Answer 1

I tested your code. If you remove this line:

document.getElementById('building_view').value = newVal;

The two inputs you want to change receive the values.

This is because the code is being blocked at this point, since in the Htmls you posted there is no element with the id "building_view"