JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
<form>
    <label><input name="1 Level" type="radio" value="0" data-show="1lev" />1 Level</label>
    <label><input name="1 Level" type="radio" value="1" data-show="2lev" />2 Level</label>
    <label><input name="1 Level" type="radio" value="2" data-show="3lev" />3 Level</label>
    
</form>

<div class="filtr"> 
     <!-- we'll clone this one... -->   
     <div class="test" id="1lev">
    <div class="loop"> 
        <button value='up' >Up</button>
		<button value='down' >Down</button>
        <input type="text" />
        <button class="btn del">x</button>
        <button class="btn add">Add</button>
    </div>
    </div>
    <!-- here ...-->
</div>

<div class="filtr"> 
     <!-- we'll clone this one... -->  
     <div class="test" id="2lev"> 
    <div class="loop"> 
        <button value='up' >Up</button>
		<button value='down' >Down</button>
        <input type="text" />
        <button class="btn del">x</button>
        <button class="btn add">Add</button>
    </div>
    </div>
    <!-- here ...-->
</div>

<div class="filtr"> 
     <!-- we'll clone this one... -->   
     <div class="test" id="3lev">
    <div class="loop"> 
        <button value='up' >Up</button>
		<button value='down' >Down</button>
        <input type="text" />
        <button class="btn del">x</button>
        <button class="btn add">Add</button>
    </div>
    </div>
    <!-- here ...-->
</div>



</div>

CSS

@charset "utf-8";
/* CSS Document */
body {
	font: normal 15px 'Roboto-Regular'; color:#000;
	margin: 0;
	padding: 0;
	height:auto;
	background:url(images/body_bg.jpg) top left
}
@font-face {
				font-family: 'Roboto-Bold';
				src: url('font/robotobold0.eot');
				src: url('font/robotobold0.eot?#iefix') format('embedded-opentype'),
						 url('font/robotobold0.woff') format('woff'),
						 url('font/robotobold0.ttf') format('truetype'),
						 url('font/robotobold0.svg#robotobold0') format('svg');
				font-weight: normal;
				font-style: normal;
		}
@font-face {
				font-family: 'Roboto-Regular';
				src: url('font/robotoregular1.eot');
				src: url('font/robotoregular1.eot?#iefix') format('embedded-opentype'),
						 url('font/robotoregular1.woff') format('woff'),
						 url('font/robotoregular1.ttf') format('truetype'),
						 url('font/robotoregular1.svg#robotoregular1') format('svg');
				font-weight: normal;
				font-style: normal;
		}
@font-face {
				font-family: 'Roboto-Light';
				src: url('font/robotolight.eot')
				src: url('font/robotolight.eot?#iefix') format('embedded-opentype'),
						 url('font/robotolight.woff') format('woff'),
						 url('font/robotolight.ttf') format('truetype'),
						 url('font/robotolight.svg#robotolight') format('svg');
				font-weight: normal;
				font-style: normal;
		}
.wrapper{
	width:1024px;
	margin:0 auto;
	overflow:auto;
	background:#f3f1ec;
	padding:10px;
}
form span{
	display:block;
	line-height:28px;
	margin-top:6px;
}
label{
	font-size:14px;
	margin-right:20px;
}
#1lev, #2lev, #3lev{
	display:none !important; visibility:hidden
}
button {
-webkit-appearance: none;
border: none;
padding: 3px 8px;
margin-bottom: 8px;
background: #505050;
color: #fff;
width: auto;
outline: none;
cursor: pointer;
margin: 0;
font: normal 14px;
}




.filtr{
    width:100%;
	margin-top:20px;
}
.loop {
}
.loop .add{
    display:none;
}
.loop:only-of-type .del{
    display:none;
}
.loop:only-of-type .add{
   ...

JavaScript

$(document).ready(function(){
     
     $(":radio").click(function(){
         $(".test").hide();
         var show = $(this).attr("data-show");
         $("#"+show).show(300)
     });

		$filtr = $('.filtr');
		
		$filtr.on('click', '.add', function(){
			$(this).closest('.loop').clone().appendTo( $(this).closest('.test') );
		});
		
		$filtr.on('click', '.del', function(){
		   $(this).closest('.loop').remove();
		});
		
		$('#1lev, #2lev, #3lev').hide();
     
     //For sort up/down
     function moveUp(item) {
    var prev = item.prev();
    if (prev.length == 0)
        return;
    prev.css('z-index', 999).css('position','relative').animate({ top: item.height() }, 250);
    item.css('z-index', 1000).css('position', 'relative').animate({ top: '-' + prev.height() }, 300, function () {
        prev.css('z-index', '').css('top', '').css('position', '');
        item.css('z-index', '').css('top', '').css('position', '');
        item.insertBefore(prev);
    });
}
function moveDown(item) {
    var next = item.next();
    if (next.length == 0)
        return;
    next.css('z-index', 999).css('position', 'relative').animate({ top: '-' + item.height() }, 250);
    item.css('z-index', 1000).css('position', 'relative').animate({ top: next.height() }, 300, function () {
        next.css('z-index', '').css('top', '').css('position', '');
        item.css('z-index', '').css('top', '').css('position', '');
        item.insertAfter(next);
    });
}

$(".filtr").sortable({ items: ".loop", distance: 10 });
$(document).on("click", "button", function() {
    var btn = $(this);
    var val = btn.val();
    if (val == 'up')
        moveUp(btn.parents('.loop'));
    else
        moveDown(btn.parents('.loop'));
});
   
});