JSFiddle - React, Tailwind, and code Playground

by dvanauken

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form id="frmZone">
    <div id="blue" class="form-group" style="background: lightblue">
      <label class="control-label col-sm-3">Lookup Fields:- +</label>
      <div class="col-sm-4">
        <input class="form-control" placeholder="">
      </div>
      <div class="col-xs-1">
        <a class="form-control btn btn-primary" href="#" onclick="javascript:remove(this);return false;">-</a>
      </div>
      <div class="col-xs-1">
        <a class="form-control btn btn-primary minus" href="#" onclick="javascript:add();">+</a>
      </div>
      <div class="clear"></div>
    </div>
</form>

JavaScript

function remove(element){
    alert('test=[' +  $(event.target).parent().parent().html() + ']');
    //var element = $(event.target).parent().html();
    //var parent = $(element).closest(div).attrib('id');

    //alert(element.html());
		//alert(parent);
	}
	
	
	function add(){
		try{
    
    	var id = 'div' + Math.round(new Date().getTime() + (Math.random() * 100));
    
			var element = "<div id='" + id + "' class='form-group' style='background:lightgreen'><label class='control-label col-sm-3'></label><div class='col-sm-4'><input class='form-control' placeholder=''></div><div class='col-xs-1'><a class='form-control input-sm minus' onclick='javascript:remove(this);return false;'>-</a></div><div class='col-xs-1'><a class='form-control input-sm minus' onclick='javascript:add();return false;'>+</a></div><div class='clear'></div></div>";
			$('#frmZone').append(element);
		}
		catch(exception){
			alert(exception);
		}
		return false;
	}