JSFiddle - React, Tailwind, and code Playground

by halirgb

HTML

<div class="prices">
    <div class="range first">
        From <span class="from">0</span>
        to:<input type="text" class="to" />
        price:<input type="text" class="price" />
        <button class="add">Add</button>
    </div>
</div>

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

JavaScript

var priceList = [];
$(document).on('click', '.range .add', function(){
    
        var from = $(this).parent().find('.from').text();
        var nextFrom = $(this).parent().find('.to').val();
        var to = $(this).parent().find('.to').val();
        var price = $(this).parent().find('.price').val();
    
    var markup = '<div class="range">From: <span class="from">'+ nextFrom +'</span>to:<input type="text" class="to" />price:<input type="text" class="price" /><button class="add">Add</button></div>';
    
    var markupTable = '<tr><td>' + from + '</td><td>' + to + '</td><td>$' + price + '</td></tr>';
    
    
    priceList.push({from:from, to:to, price:price});
    
    $('.prices').append(markup);
    $('.price-table').append(markupTable);
    $(this).remove();
    console.log(priceList);
});