Edit in JSFiddle

/*
Written by Vinyasi in 2016, copyleft.
*/

function gcd_randomizing_demo(count, limit) {

  // 'count' is the maximum quantity of random numbers
  // 'limit' is the maximum size of each multiplier

  var text = ''; // is returned to the function call

  text += '<table class="chart" border="3" cellpadding="4" cellspacing="15">' + "\n";
  text += '<caption><b>' + "\n";
  text += 'The&nbsp;Euclidean&nbsp;Algorithm' + "\n";
  text += '</b></caption>' + "\n";
  text += '<tr style="background-color: #ffeecc"><th>' + "\n";

  // Alter these four values if you like...
  var min = 10; // minimum size of random number seeds
  var size = 500; // size limit of random number seeds
  var limb = 1; // multiplier minimum size
  var kows = 1; // is the maximum quantity of multipliers

  var x;
  var i;
  var v;
  var w;
  var mult = 1; // preinitialize the composite multiplier

  // This has to be at least one greater than the largest possible random number.
  // Otherwise, the sort function will push all the numbers to the
  // top of the terms array and begin to cut them out a little at a time!
  var numeric_padding = (size * Math.pow(limit, kows)) + 1;

  var cows = Math.floor((Math.random() * (kows - 1)) + 1); // actual quantity of multipliers

  var multiplier = [];
  for (x = 0; x < cows; x++) {
    multiplier[x] = Math.floor((Math.random() * (limit - 1)) + limb);
    mult = mult * multiplier[x];
  }

  var cownt = Math.floor((Math.random() * (count - 1)) + 2); // actual quantity of random numbers
  var save_cownt = cownt;

  text += cownt + ' random numbers';

  var terms = [];
  var booboo;
  var color_orange;

  for (i = 0; i < cownt; i++) {
    terms[i] = Math.floor((Math.random() * (size - 1)) + min);

    for (w = 0; w < i; w++) // test for duplicate random numbers and try again if true
    {
      if (terms[i] == terms[w]) {
        booboo = true;
        i--;
        break;
      }
    }

    if (i % 2 === 0) {
      color_orange = 'ffd5a2';
    } else {
      color_orange = 'ffeecc';
    }

    if (!booboo) {
      text += '</th><th style="background-color: #' + color_orange + '">' + "\n";
      text += terms[i] + "\n";
    } else {
      booboo = false;
    }
  }

  text += '</th></tr>' + "\n";
  text += '<tr style="background-color: #ffeecc"><th>' + "\n";
  text += 'multiply by ' + mult + "\n";

  var holds = [];
  for (i = 0; i < cownt; i++) {
    for (x = 0; x < cows; x++) {
      terms[i] = terms[i] * multiplier[x];
    }
    holds[i] = terms[i];

    if (i % 2 === 0) {
      color_orange = 'ffd5a2';
    } else {
      color_orange = 'ffeecc';
    }

    text += '</th><th style="background-color: #' + color_orange + '">' + "\n";
    text += terms[i] + "\n";
  }

  text += '</th></tr>' + "\n";
  text += '<tr style="background-color: #ddffdd"><th>' + "\n";
  text += 'sort from left to right' + "\n";

  var kount = cownt;
  var remains = [];
  remains[0] = 0;

  terms.sort(function(a, b) {
    return a - b;
  });

  var color_lime;

  for (i = 0; i < cownt; i++) {

    if (i % 2 === 0) {
      color_lime = 'b3ffb3';
    } else {
      color_lime = 'ddffdd';
    }

    text += '</th><th style="background-color: #' + color_lime + '">' + "\n";
    text += terms[i] + "\n";
  }

  text += '</th></tr>' + "\n";
  text += '<tr style="background-color: #ddffdd"><th>' + "\n";
  text += 'shift to the right' + "\n";
  text += '</th><th style="background-color: #b3ffb3">' + "\n";
  text += '0' + "\n";

  for (i = 0; i < (cownt - 1); i++) {
    remains[i + 1] = terms[i];

    if (i % 2 !== 0) {
      color_lime = 'b3ffb3';
    } else {
      color_lime = 'ddffdd';
    }

    text += '</th><th style="background-color: #' + color_lime + '">' + "\n";
    text += remains[i + 1] + "\n";
  }

  text += '</th></tr>' + "\n";
  text += '<tr style="background-color: #d5ffff"><th>' + "\n";
  text += 'modulo remainder' + "\n";

  // comment out the following 'while' loop and uncomment
	// the two lines immediately afterwards for debugging
  while (kount > 1)
  //var q;
  //for (q = 0; q < 4; q++)
  {

    cownt = kount;

    for (i = 0; i < save_cownt; i++) {
      if (i === 0) {
        remains[i] = terms[i];
      } else {
        remains[i] = terms[i] % remains[i];
      }

      var color_cyan;

      // print out remains
      if (i % 2 === 0) {
        color_cyan = 'a0ffff';
      } else {
        color_cyan = 'd5ffff';
      }
      text += '</th><th style="background-color: #' + color_cyan + '">' + "\n";

      if (terms[i] != numeric_padding) {
        text += remains[i] + "\n";
      } else {
        text += '&nbsp;' + "\n";
      }
    }

    // uncomment the following line for debugging
    //if (q == 3) { break; }

    for (v = 0; v < save_cownt; v++) {
      terms[v] = numeric_padding;
    }

    kount = 0;

    for (i = 0; i < cownt; i++) {
      if (remains[i] !== 0) {
        terms[i] = remains[i];
        kount++;
      }
    }

    if (kount > 1) {
      terms.sort(function(a, b) {
        return a - b;
      });

      text += '</th></tr>' + "\n";
      text += '<tr style="background-color: #ddffdd"><th>' + "\n";
      text += 'sort from left to right' + "\n";

      // print out terms
      for (v = 0; v < save_cownt; v++) {
        if (v % 2 === 0) {
          color_lime = 'b3ffb3';
        } else {
          color_lime = 'ddffdd';
        }
        text += '</th><th style="background-color: #' + color_lime + '">' + "\n";

        if (terms[v] != numeric_padding) {
          text += terms[v] + "\n";
        } else {
          text += '&nbsp;' + "\n";
        }
      }

      text += '</th></tr>' + "\n";
      text += '<tr style="background-color: #ddffdd"><th>' + "\n";
      text += 'shift to the right' + "\n";
      text += '</th><th style="background-color: #b3ffb3">' + "\n";
      text += '0' + "\n";

      remains[0] = 0;

      // print out prior remains shifted to the right
      for (v = 1; v < save_cownt; v++) {
        if (v % 2 === 0) {
          color_lime = 'b3ffb3';
        } else {
          color_lime = 'ddffdd';
        }
        text += '</th><th style="background-color: #' + color_lime + '">' + "\n";

        if (terms[v] != numeric_padding) {
          remains[v] = terms[v - 1];
          text += remains[v] + "\n";
        } else {
          text += '&nbsp;' + "\n";
        }
      }

      text += '</th></tr>' + "\n";
      text += '<tr style="background-color: #d5ffff"><th>' + "\n";
      text += 'modulo remainder' + "\n";

      // uncomment either of the following two lines for debugging
      //if (q == 5) { break; }
      //		text += '*' + kount + '*';

    }

  }

  text += '</th></tr></table>' + "\n";

  var pretext = '<h2>' + "\n"; // is returned to the function call
  pretext += 'The <big>GCD</big> of ';


  // print out holds
  for (v = 0; v < save_cownt; v++) {
    if (v < (save_cownt - 2)) {
      pretext += '<big>' + holds[v] + '</big>, ';
    } else if (v == (save_cownt - 2)) {
      pretext += '<big>' + holds[v] + '</big> and ';
    } else if (v == (save_cownt - 1)) {
      pretext += '<big>' + holds[v] + '</big>';
    }
  }

  pretext += ' is <span style="color: red"><big>' + terms[0] + '</big></span>.' + "\n\n";
  pretext += '</h2>' + "\n\n";

  return pretext + text;

}

var howManyIntegers = 4;
var largestMultiplier = 5;
var outputText = gcd_randomizing_demo(howManyIntegers, largestMultiplier);

document.getElementById("demonstration").innerHTML = outputText;
<div align="center">

  <span id="demonstration"></span>

</div>