Lists Matcher

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<main class="st-main">
		<div class="lists-container">
			<div class="list-wrp">
				<h4>MATCH FINDER</h4>
				<ul class="list_main">
					<li><input class="row_a" value=""><input class="row_b" value=""><button class="less-field"><i class="fa fa-minus-circle"></i></button></li>
					<li><input class="row_a" value=""><input class="row_b" value=""><button class="less-field"><i class="fa fa-minus-circle"></i></button></li>
					<li><input class="row_a" value=""><input class="row_b" value=""><button class="less-field"><i class="fa fa-minus-circle"></i></button></li>
					<li><input class="row_a" value=""><input class="row_b" value=""><button class="less-field"><i class="fa fa-minus-circle"></i></button></li>
					<li><input class="row_a" value=""><input class="row_b" value=""><button class="less-field"><i class="fa fa-minus-circle"></i></button></li>
					<li><input class="row_a" value=""><input class="row_b" value=""><button class="less-field"><i class="fa fa-minus-circle"></i></button></li>
				</ul>
			</div>
		</div>
		<p class="match"></p>
		<br>
		<button class="new-field"><i class="fa fa-plus-circle"></i> New fields set</button>
		<button class="action">match</button>
	</main>

CSS

body {
  font-family: sans-serif;
}

.st-main {
  max-width: 960px;
  margin: 15px auto;
  padding: 0 15px;
  text-align: center;
}

.lists-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.lists-container .list-wrp {
  width: 100%;
}

.list_main {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}

.list_main li {
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 5px;
  background: #FAFAFA;
}

.list_main li i {
  margin: 0 5px;
}

.list_main li input {
  width: 100%;
  margin-right: 10px;
  background-color: transparent;
  border: 1px solid lightgray;
  font-size: 14px;
  font-weight: lighter;
  text-align: center;
}

.list_main li:nth-child(even) {
  background: #F5F5F5;
}

button[class*="new-field"],
button[class*="less-field"] {
  background: transparent;
  color: #2196F3;
  text-transform: uppercase;
  border: 0;
  padding: 0;
}

.new-field {
  display: inline-block;
  font-size: 12px;
  margin: 0 auto 15px;
  text-decoration: underline;
}

.match {
  display: none;
}

.match .result {
  position: relative;
  padding: 5px 15px;
  margin: 10px 0;
  text-align: center;
  color: white;
  background-color: #51adf6;
  border-radius: 5px;
}

.match .result .close {
  position: absolute;
  right: 15px;
  transition: all 0.3s ease-in-out;
}

.match .result .close:hover {
  cursor: pointer;
  opacity: .75;
}

.match .result-nop {
  background-color: #f39c12;
}

.match .result-ok {
  background-color: #1abc9c;
}

.action {
  width: 100%;
  padding: 10px 15px;
  color: white;
  text-transform: uppercase;
  border: 0;
  border-radius: 5px;
  font-size: 10px;
}

@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  -webkit-animation-name: fade-in;
          animation-name: fade-in;
  -webkit-animation-duration: .4s;
          animation-duration: .4s;
}

JavaScript

$(".action").click(function () {
	// take the value from inputs only if not empry
	var x = $(".row_a").map(function () {
		if ($(this).val() != '') {
			return this.value;
		}
	}).get()

	var y = $(".row_b").map(function () {
		if ($(this).val() != '') {
			return this.value;
		}
	}).get()
	// make the intersection
	var intersection = x.filter(Set.prototype.has, new Set(y));
	// write the result
	if (intersection.length === 0) {
		$(".match").fadeIn().append("<div class='result result-nop fade-in'>No Match Found <span class='close'><i class='fa fa-times-circle'></i><span></div>");
	} else {
		$(".match").fadeIn().append("<div class='result result-ok fade-in'>" + intersection.join(',&emsp;') + " - match in both lists <span class='close'><i class='fa fa-times-circle'></i><span></div>");
	}
});

$(".new-field").click(function () {
	$(".list_main").append("<li class='fade-in'><input class='row_a' value=''><input class='row_b' value=''><button class='less-field'><i class='fa fa-minus-circle'></i></button></li>");
});

$("body").on('click', '.less-field', function () {
	$(this).closest('li').fadeOut(function () {
		$(this).remove();
	});
});

$("body").on('click', '.close', function () {
	$(this).closest('.result').fadeOut(function () {
		$(this).remove();
	});
});