JSFiddle - React, Tailwind, and code Playground

HTML

<div id ='container'>
    <button id='addNewProduct'>Add new product</button>
</div>

<!-- template -->
<div id='productTemplate' style='display:none;'>
    <div class='own'>
        <div class='header'><label>Product Name</label><label>Price</label></div>
        <div class='content'><input type='text' class='p-name' /><input type='text' class='p-price' /></div>
    </div>
    <div class='competitor'>
        <div class='header'><label>Competitor product</label><label>Price</label></div>
        <div class='right'><button class='add'>Add</button></div>
        <div class='content-container'>
            <div class='competitor-content'><input type='text' class='p-name' /><input type='text' class='p-price' /></div>
            <div class='control-buttons'><button class='del'>Remove</button></div>
        </div>
    </div> 
</div>

CSS

body {width:980px;}
.own, .competitor, .header, .content-container, .control-buttons, .competitor-content {float:left;}
.right {float:right;}
.header {display:inline-block;}
.own, .competitor{width:400px;}
input[type=text] {width:75px}
.content, .content-container{clear:both;}
.competitor-content {width:170px;}

JavaScript

$(function() {
    $('#addNewProduct').click(function() {
        var self = $(this),
            index = self.index(),
            container = $('#container');
        rowTemplate(index).appendTo(container);
    });

    $('.add').live('click', function() {
        var self = $(this),
            parent = self.parents('.competitor');
        parent.append(contentTemplate());
    });

    $('.del').live('click', function() {
        var self = $(this),
            parent = self.parents('.content-container');
        parent.remove();
    });
});

function rowTemplate(index) {
    return $('#productTemplate').clone().attr('id', 'row' + index).show();
}

function contentTemplate() {
    return $('#productTemplate').find('.content-container').clone();
}