Как изменить значения полей ввода, которые соответствуют значению атрибута данных с Jquery

Я хочу изменить значение полей ввода для каждого элемента соответствия с определенным значением атрибута данных.
Таким образом, пользователь нажимает на значение, и появляются поля ввода, а затем сумма, введенная в поле ввода, также отражается в других полях с тем же продуктом.

т.е. изменить себестоимость на Родительский продукт, а также Изменить вариацию в реальном времени.

Код.

HTML

<table>

<tr>
    <td>Product One</td>
    <td>
        <p class="cost" data-productid="107">12.00</p>
        <input type="text" style="display:none" class="cost_input" data-productid="107"/>
    </td>
</tr>

<tr>
    <td>Variation of Product One</td>
    <td>
        <p class="cost">12.00</p>
        <input type="text" style="display:none" class="cost_input 107" data-productid="107"/>
    </td>
</tr>

<tr>
    <td>Product Two</td>
    <td>
        <p class="cost" data-productid="108">12.00</p>
        <input type="text" style="display:none" class="cost_input" data-productid="108"/>
    </td>
</tr>

JS

    $(".cost").click(function(event) {
            var id = $(this).data('productid');
            $(".cost").hide();
            $('.cost_input').show();
            $(this).next().select();            
            $('.cost_input [data-productid="'+id+'"]').bind('keyup keypress blur', function() {  
            $('.cost_input [data-productid="'+id+'"]').val($(this).val());
            });
});    

Fiddle - http://jsfiddle.net/ez4uD/15/