Как добавить данные в несколько полей ввода и сохранить их при отправке?

Question

Я пытаюсь добавить некоторые данные в каждое поле ввода.

Пример, если в поле ввода "info" добавлено поле ввода.

If: красный div и данные отсутствуютЕсли данные добавлены, данные должны быть нулевыми. Голубой элемент div и буква "p" добавляются к вводу добавленной информации при отправке формы.Синий div и "V" добавляются в добавленное поле ввода.

Как мне добавить эти данные к добавленным входам и добавить данные к их значению при отправке?

Мой HTML и jQuery: http://jsfiddle.net/z5qeX/2/

У меня есть пример этого только с 1 полем ввода:

    $('.redDiv').click(function() {
        $('#webhost_navn').data('myData', null);
    });
    $('.blueDiv').click(function() {
        $('#webhost_navn').data('myData', 'p');
    });
        $('.blackDiv').click(function() {
        $('#webhost_navn').data('myData', 'V');
    });
// And the form submit button with the id of smt
    $('#smt').click(function() {
        var myData = $('#webhost_navn').data('myData'),
            val = $('#webhost_navn').val();
        if (myData) {
            $('#webhost_navn').val(myData + val);
        }
    });

Как создать эту функцию для каждого добавленноговвести и сохранить все данные при отправке?

При нажатии одного из красного, синего или черного цвета:

1. Select the added input field
2. Create a data variable and save p, V or nothing depending on what div that where clicked. 
3 .On submit add all these variable to values of the correct input fields

Answer 1

Что-то вроде

mydata = { "webhost_navn": {red:null, blue:"p", black:"V"}, "....": { ... , ... , ...}}


$('.blackDiv,.blueDiv,.redDiv').live("click", function() {
  var field = $("#"+this.id.replace(this.className,""));
  if (field) field.val(mydata[field.prop("name")][this.className.replace("Div","")];
});

.
.
.
  'id'   : element.prop('id') + 'info',

$(this).parent().append(element).append('<div class="redDiv" id="'+element.prop('id')+'redDiv" style="background:red;width:20px;height:20px;"></div><div class="blueDiv" id="'+element.prop('id')+'blueDiv" style="background:blue;width:20px;height:20px;"> </div><div class="blackDiv" id="'+element.prop('id')+'blackDiv"style="background:black;width:20px;height:20px;"> </div>');
})

Answer 2

Трудно быть полностью уверенным в том, что вы спрашиваете, но я думаю, что вы ищете, это живая функция jQuery

$('.redDiv').live('click', function() {$('#webhost_navn').data('myData', null);});

Живая функция связывает слушателей со всеми вновь созданными элементами управления.