Create a variable with two arrays made from two .map() looking for match or intersection

Question

The point is I'm not an expert with JS so excuse me if my code is a big mistake, in fact I'm just training to learn making a huge "Frankenstein" from a research around the web.

I want to take two set or lists of values input by the user and compare them looking for matches with js and jquery.

First, I take the values from two groups of inputs (diferenced by class) with .map(), this to have the values to create the arrays.

var x = $(".row_a").map(function() {
   return this.value;
}).get();

var y = $(".row_b").map(function() {
   return this.value;
}).get();

Then I'm traying to create one variable that contain the two arryas separatly (here Is when think I have the problem) if I "hardcode" the arrays the next part of the script works as expected, but if I use the the first two variables made above, the script just crash.

var arrays = [
    [x],
    [y] 
  ];

In the third part (I really don't understand this part of the code in deep) I run the script that compare the two arrys on the second variable and then append a paragraph with the result.

var result = arrays.shift().reduce(function(res, v) {
if (res.indexOf(v) === -1 && arrays.every(function(a) {
    return a.indexOf(v) !== -1;
  })) res.push(v);
return res;
}, []);

$(".match").append("<div>Numbers " + result + " match in both lists</div>");

Somebody can help me to undersnatd whats wrong or giveme a clue or link that can help?

curious: if I use the same variable twice in the variable that contain the arrays, the script works and finds four matches (I think is right becouse compare the same array)

DEMO

--

EDITED:

Thanks to @KarlReid and @Potorr. I didn't know the intersection concept in javascript, so now I know a better way to achive the result. I'll read more about it to try understand the answer in deep.

Thanks to @Alexandru for letting me know the sintax error, it'll be very basic and usefull henceforth.

Final Result: DEMO

(I'll be edit the tittle of the post to try improve the search for others with the same question in the future.)

Answer 1

This works, explanation in-line:

$(".action").click(function() {
  var x = $(".row_a").map(function() {
    return this.value;
  }).get()

  var y = $(".row_b").map(function() {
    return this.value;
  }).get()

  // this is not really needed, if you want it:
  // x, y are already arrays, so you don't need to wrap them with []
  // var arrays = [
  //  x,
  //  y
  //];

  // intersection, adapted from: https://stackoverflow.com/questions/1885557/simplest-code-for-array-intersection-in-javascript
  // if you use the "arrays" variable, then change x to arrays[0] and y to arrays[1]
  //var intersection = x.filter(function(n) {
  //  return y.indexOf(n) !== -1;
  //});

  // the intersection function posted by @KarlReid is actually better and faster:
  var intersection = x.filter(Set.prototype.has, new Set(y));

  // create the result string
  var result = intersection.join(',')

  $(".match").append("<div>Numbers " + result + " match in both lists</div>");
});

Edit: Changed intersection function to the one posted by @KarlReid

Answer 2

Although better solutions exists, as pointed out by comments the Potorr's answer, the only problem with the code posted is this:

var arrays = [
    [x],
    [y] 
];

x and y are already arrays, so you don't need to wrap them with [ ]. The code works if you simply replace the above code with:

var arrays = [
    x,
    y 
];

Updated demo