Pair every digit inside array with the others not including repeats or reversed pairs

Question

I have 3 inputs which take 3 digits each. My code then combines all of the numbers into 1 array. [1,2,3,4,5,6,7,8,9] in this case. I just want to output every pair starting with the first digit excluding double digits, repeated pairs, or reversed pairs. So I would want it to look something like:

12

13

14 etc.

but if 12 is already a pair inside the array then 21 would not be added. ( reversed pairs ). Double digits like 55 would not be added as well as repeat pairs ( any pair would not be entered twice ).

Any ideas on the direction I should take?

var button = document.querySelector( 'button' );
button.addEventListener( 'click', clicked );

function clicked() {
 var output = document.getElementById( 'output' );
  
  var first = document.getElementById( 'first' );
  var second = document.getElementById( 'second' );
  var third = document.getElementById( 'third' );
  
  var first = first.value.split( '' );
  var second = second.value.split( '' );
  var third = third.value.split( '' );
  
  var numGroup = first.concat( second );
  numGroup = numGroup.concat( third );
  
  //alert( numGroup );
  
  output.innerHTML = '';
  
  var i = 0;
  var j = 0;
  
  for( i; i < numGroup.length; i++ ){
   for( j; j < numGroup.length; j++ ){
    output.innerHTML += numGroup[ i ] + numGroup[ j ] + '<br>';
   }
  }
}

* {
  box-sizing: border-box;
}
html {
  font-family: Arial;
  letter-spacing: 0.1rem;
}
.controls {
  display: flex;
}
input {
  font-size: 2rem;
  letter-spacing: 0.125rem;
  padding: 0.5rem;
  width: 4.75rem;
  margin-right: 1rem;
}
button {
  height: 4.5rem;
  width: 4.75rem;
  text-transform: uppercase;
  padding: 8px;
  background: black;
  border: none;
  color: white;
  cursor: pointer;
}
button:hover {
  outline-color: aqua;
  outline-width: 2px;
  outline-style: solid;
  outline-offset: 1px;
}
.output {
  background-color: #eee;
  padding: 1rem;
  margin-top: 1rem;
  width: 22rem;
}

<div class="controls">
  <input type="text" maxlength="3" id="first" value="123">
  <input type="text" maxlength="3" id="second" value="456">
  <input type="text" maxlength="3" id="third" value="789">
  <button>submit</button>
</div>

<div class="output" id="output">
  output
</div>

EDIT: As far as I'm aware this is a question about the possible combinations and not permutations.

Answer 1

If I understood the problem, it seems like for each item in the array, you want to pair it with all the items following it. This avoids repeating pairs (including reversed ones) as well as doubles.

To do this, you can use .reduce() to put together the resulting array. On each iteration, you'll have the current number, and then you just need to slice the original array from one after the current index forward to get all the ones that should be paired with it.

So you take the sub-slice after the current index, you .map() it, returning the pairing of the outer number with the current one from the .map() callback, and concat the mapped array to the .reduce result.

All this takes only a few lines of code.

const arr = [1,2,3,4,5,6,7,8,9];

const res = arr.reduce((res, n, i, arr) =>
  res.concat(arr.slice(i+1).map(nn => "" + n + nn))
, [])

console.log(res);

For the clarified requirements, eliminate any duplicates in the original data set early. You can use the example provided by trincot in the comments.

const arr = [...new Set([1,2,3,4,5,5,6,3,7,8,9])];

const res = arr.reduce((res, n, i, arr) =>
  res.concat(arr.slice(i+1).map(nn => "" + n + nn))
, []);

String.prototype.reverse = function() {   this.split("").reverse().join("")
}

console.log("No doubles, dupes or reverse dupes?", 
  res.every(s =>
    res.indexOf(s) === res.lastIndexOf(s) &&
    res.indexOf(s.reverse()) === -1 &&
    s !== s.reverse()
  )
);

console.log(res);