JSFiddle - React, Tailwind, and code Playground

by halirgb

HTML

<h4>Price</h4>
<div class="prices">
    
    <div class="range">
            <span class="product-count-from">0</span> - <input class="product-count-to" type="text" value="100" /> <input class="product-price" type="text" value="12$" />
        <button class="add-range">Add</button>
    </div>
</div>
<h4>Price table</h4>

<table class="price-table">
    <thead>
        <tr>
            <th>from</th>
            <th>to</th>
            <th>price</th>
        </tr>
    </thead>
    <tbody>
        
    </tbody>
</table>

JavaScript

$(document).on('click','.range .add-range', function(){
   var procuctPrice = $(this).parent().find('.product-price').val();
    
   if($(this).parent().find('.product-count-to').val() == undefined){
        // first
        var procuctCountFrom = $(this).parent().find('.product-count-from').text();
        var procuctCountTo = $(this).parent().find('.product-count-to').val();
    }else{
        // not first
        var procuctCountFrom = $(this).parent().find('.product-count-to').val();
        var procuctCountTo =  $(this).parent().find('.product-count-from').val();
    }
    console.log(procuctCountTo);
    var markup = '<div class="range"><span class="product-count-from">' + procuctCountFrom + '</span> - <input class="product-count-to" type="text" value="100" /> <input class="product-price" type="text" value="12$" /><button class="add-range">Add</button></div>';
    
    $('.prices').append(markup);
   
    var priceTable = '<tr><td>' + procuctCountFrom + '</td><td>' + procuctCountTo + '</td><td>' + procuctPrice + '</td></tr>';
    $('.price-table').append(priceTable);
    
    $(this).remove();
});