Javascript 选择最接近的输入以调整值

我有3个输入框，每个输入框上方都有单选按钮，用于填充框的值。每个框有5个单选按钮。每个盒子/按钮组应独立运行。它们是用相同的类创建的，我使用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;

这不起作用，因为它调整了所有3个，但我需要它只调整最近的输入。我试过下面的方法

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

上下文中的完整代码段

<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">

$20
$50
$100
$500
其他（元）

如何获得最接近的nyp输入来调整值。

请尝试此代码

$（函数（）{
$（'.nyp radio'）。单击（函数（）{
$（this）.parents（'.price wrapper'）.children（'[type=“text”]'））.val（$（this.val（））；
});
});

$20
$50
$100
$500
其他（元）
$20
$50
$100
$500
其他（元）
您可能遇到的问题是，3个“输入框”包含具有相同ID的输入（基本上您有例如nyp-SUPPORED-1 3次）。您应该尝试为每个组生成不同的ID，保持名称相同，但组之间不同-例如：

第一组：

        <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>  


$20
$50
$100
$500

第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>               


$20
$50
$100
$500

然后，您可以根据jquery中的组名进行选择，并使用相同的值进行更新。
您是否共享了完整的代码？因为我只能看到一个输入文本框。它们都是完整代码段的重复对象。如中所示，对于3个不同的部分，整个代码段重复3次。假设，正确的代码在一个或三个代码中应该是相同的，尽管它应该知道另外两个代码的存在，不要弄乱它们。你是否在div has class price wrapper（第二行）中尝试了nyp输入（最后一行）我更改了这个示例以便在代码段中运行它，试试这个我可以看到它在代码段中确实起作用。但我不知道如何在名字的末尾加上序号。因为你的都不一样。这就是为什么你的有效而我的无效的原因吗？是的，我理解，不幸的是这不可能。Well，问题是浏览器后面的某个地方看到两个元素具有相同的ID作为相同的元素（更新传播到具有相同ID的所有元素），我知道不久前我在某个地方发现了这个信息，我会检查我是否还有这篇文章..是的，我需要离开使用id，并根据元素的接近程度找到一个相对命令