JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    
    <tr>
        <td>Product One</td>
        <td>
            <p class="cost" data-productid="107">12.00</p>
            <input type="text" 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>
       
</table>

CSS

table td {
    border:1px solid #ccc;
    padding:10px;

}

JavaScript

$(".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());
            });    
 });