Javascript Jquery将一些复杂的数据绑定到输入字段

我正在尝试向表单中添加一些Jquery功能

我想我想做：

.greenDiv是标准的，应该具有100%的不透明度 单击.blackDiv或.redDiv时，.greenDiv应有50%的不透明度。 单击的div应该有100%的不透明度，其余的50%

我的Jquery中有这样的内容：

$('#webhost_navn').data('myData', 'i');

相反，我想选择最近的输入字段，不添加“info”，并将数据绑定到它

提交时，应保存绑定到输入的所有数据

例如：

I用户单击.redDiv，数据I被添加到最近的输入字段，而不在其名称中添加信息

用户单击另一个带有.blackDiv的输入字段，p被添加到输入字段中，而没有“添加到其名称”

当用户提交表单时，i和p将添加到正确的输入字段中

我的Jquery：

$('.redDiv').click(function() {
    $('#webhost_navn').data('myData', 'i');
});
$('.greenDiv').click(function() {
    $('#webhost_navn').data('myData', null);
});
    $('.blackDiv').click(function() {
    $('#webhost_navn').data('myData', 'p');
});

$('#smt').click(function() {
    var myData = $('#webhost_navn').data('myData'),
        val = $('#webhost_navn').val();
    if (myData) {
        $('#webhost_navn').val(myData + val);
    }
});

我的HTML：

<div class="input numeric integer optional"><label for="company_ekstratrafik" class="integer optional"> Pris pr.</label><input type="number" step="1" size="50" name="company[ekstratrafik]" id="company_ekstratrafik" class="numeric integer optional"></div>
<div class="button-row">
            <button style="font-size: 11px; display: none;" type="button" class="add">Add info</button>
            <button style="font-size: 11px; display: inline;" type="button" class="remove">Remove</button>
<input type="input" step="1" size="50" name="company[ekstratrafikinfo]" id="company_ekstratrafikinfo" class="infoinput"><div class="redDiv"></div><div class="greenDiv"></div><div class="blackDiv"></div></div>

Pris pr。
添加信息
去除

在“选择最近的输入字段而不添加“信息”中，请解释“最近的”和“添加的“信息”。它希望选择公司[EKStrafik]，而不是公司[EKStrafikinfo]。