JSFiddle - React, Tailwind, and code Playground

by infatti

HTML

<div class="control-group"><!-- add or remove -->
                    <!-- add control -->
                    <div class="controls">
                      <button class="btn add" type="button">Add</button>
                      <textarea rows="3"></textarea>
                    </div>

                    <!-- add control -->
                    <div class="controls hide">
                      <button class="btn add" type="button">Add</button>
                      <button class="btn remove" type="button">Remove</button>
                      <textarea rows="3"></textarea>
                    </div>

                    <!-- add control -->
                    <div class="controls hide">
                      <button class="btn remove" type="button">Remove</button>
                      <textarea rows="3"></textarea>
                    </div>
                </div><!-- #add or remove -->

CSS

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}html{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}q,blockquote{quotes:none}q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}a img{border:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0}.clearfix:after{clear:both}.wrapper{border-top:5px solid #5c7f92}body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:75%;line-height:1.5em;color:#525252;-webkit-font-smoothing:antialiased;background:#f1f1f1 url(../images/bg_body_texture.jpg)}a{color:#688ca0;text-decoration:none}a:hover{color:#87a4b3;text-decoration:underline}a:focus{outline:0}a.well-small:hover,a.well-callout:hover,a.well-callout-clear:hover{color:#525252}.img-rounded{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}.img-polaroid{padding:4px;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.2);-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.1);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.1);box-shadow:0 1px 3px...

JavaScript

// add next control element
$('.add').click(function() {
    $(this).parent().next('.controls').removeClass('hide');
});
// remove control element
$('.remove').click(function() {
    $(this).closest('.controls').addClass('hide');
});