Selecting the closest input to adjust value

Question

I have 3 input boxes, with radio buttons above each input box that fill in the values of the boxes. 5 Radio buttons for each box. Each box/button set should act independantly. They are created with the same classes and I adjust the value in the input boxes based on the radio button with the onclick radio button listener like so

document.getElementsByClassName('nyp-input')[0].value=this.value; 
document.getElementsByClassName('nyp-input')[1].value=this.value; 
document.getElementsByClassName('nyp-input')[2].value=this.value;

Which doesn't work because it adjusts all 3, but I need it to adjust only the closest input. I've tried the below

jQuery('input').closest('nyp').find('.nyp-input');
adj.value=this.value;

The full snippet in context

<div class="nyp" data-price="0" data-max-price="" >
<div class="price-wrapper">
        <div class="donation-options">
        <label for="nyp-suggested-1">
            <input type="radio" name="nyp-suggested" value="20" id="nyp-suggested-1" onclick="
                var adj = jQuery('input').closest('nyp').find('.nyp-input');
                adj.value=this.value;                   
            "> $20
        </label>
        <label for="nyp-suggested-2">
            <input type="radio" name="nyp-suggested" value="50" id="nyp-suggested-2" onclick="document.getElementsByClassName('nyp-input')[0].value=this.value; document.getElementsByClassName('nyp-input')[1].value=this.value; document.getElementsByClassName('nyp-input')[2].value=this.value;"> $50
        </label>
        <label for="nyp-suggested-3">
            <input type="radio" name="nyp-suggested" value="100" id="nyp-suggested-3" onclick="document.getElementsByClassName('nyp-input')[0].value=this.value; document.getElementsByClassName('nyp-input')[1].value=this.value; document.getElementsByClassName('nyp-input')[2].value=this.value;"> $100
        </label>
        <label for="nyp-suggested-4">
            <input type="radio" name="nyp-suggested" value="500" id="nyp-suggested-4" onclick="document.getElementsByClassName('nyp-input')[0].value=this.value; document.getElementsByClassName('nyp-input')[1].value=this.value; document.getElementsByClassName('nyp-input')[2].value=this.value;"> $500
        </label>            
    </div>
</div>      

<label for="nyp">
        Other ( $ ) </label>

<input id="nyp" name="nyp" type="text" value="0.00" title="nyp" class="input-text amount nyp-input text">

How can I get the closest nyp-input to adjust the value.

Answer 1

try this code

 $(function(){ $('.nyp-radio').click(function(){ $(this).parents('.price-wrapper').children('[type="text"]').val($(this).val()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="nyp" data-price="0" data-max-price="" > <div class="price-wrapper"> <div class="donation-options"> <label for="nyp-suggested-1"> <input type="radio" class='nyp-radio' name="nyp-suggested" value="20" id="nyp-suggested-1" > $20 </label> <label for="nyp-suggested-2"> <input type="radio" class='nyp-radio' name="nyp-suggested" value="50" id="nyp-suggested-2" > $50 </label> <label for="nyp-suggested-3"> <input type="radio" class='nyp-radio' name="nyp-suggested" value="100" id="nyp-suggested-3" > $100 </label> <label for="nyp-suggested-4"> <input type="radio" class='nyp-radio' name="nyp-suggested" value="500" id="nyp-suggested-4" > $500 </label> </div> <label for="nyp"> Other ( $ ) </label> <input id="nyp" name="nyp" type="text" value="0.00" title="nyp" class="input-text amount nyp-input text"> </div> <div class="nyp" data-price="0" data-max-price="" > <div class="price-wrapper"> <div class="donation-options"> <label for="nyp-suggested-11"> <input type="radio" class='nyp-radio' name="nyp-suggested1" value="20" id="nyp-suggested-11" > $20 </label> <label for="nyp-suggested-12"> <input type="radio" class='nyp-radio' name="nyp-suggested1" value="50" id="nyp-suggested-12" > $50 </label> <label for="nyp-suggested-13"> <input type="radio" class='nyp-radio' name="nyp-suggested1" value="100" id="nyp-suggested-13" > $100 </label> <label for="nyp-suggested-14"> <input type="radio" class='nyp-radio' name="nyp-suggested1" value="500" id="nyp-suggested-14" > $500 </label> </div> <label for="nyp"> Other ( $ ) </label> <input id="nyp" name="nyp" type="text" value="0.00" title="nyp" class="input-text amount nyp-input text"> </div> 

Answer 2

The problem you may have is that the 3 "input boxes" contain inputs with the same IDs (basically you have for example nyp-suggested-1 3 times). You should try and generate different IDs keeping the same name for each group, but distinct between groups -example:

group1:

        <label for="nya1">
            <input type="radio" name="nya" value="20" id="nya1" > $20
        </label>
        <label for="nya2">
            <input type="radio" name="nya" value="50" id="nya2" > $50
        </label>
        <label for="nya3">
            <input type="radio" name="nya" value="100" id="nya3" > $100
        </label>
        <label for="nya4">
            <input type="radio" name="nya" value="500" id="nya4" > $500
        </label>  

group 2:

    <label for="nyb1">
            <input type="radio" name="nyb" value="20" id="nyb1" > $20
        </label>
        <label for="nyb2">
            <input type="radio" name="nyb" value="50" id="nyb2" > $50
        </label>
        <label for="nyb3">
            <input type="radio" name="nyb" value="100" id="nyb3" > $100
        </label>
        <label for="nyb4">
            <input type="radio" name="nyb" value="500" id="nyb4" > $500
        </label>               

Then you can select based on group name in jquery and update using the same value.