Help Me to Fix My website

Question

So i have these Random generator but its kinda broken with javascript, can anyone fix this ? example i have 17 name and want to make 10 group but its doesn't fill to 10, how I can fix that ?

The Broken Javascript :
$('button').on('click', function(e) {
e.preventDefault();
var namespergroup = parseInt($('.pergroup').val()),
allnames = $('textarea').val().split('\n'),
allnameslen = allnames.length;

var numgroups = Math.ceil(allnameslen / namespergroup);

if($('.numgroups').val()){
numgroups = parseInt($('.numgroups').val());
namespergroup = allnameslen / numgroups;
}

$('.groups').empty();

for (i = 0; i < numgroups; i++) {
$('.groups').append('<div class="group" id="group' + (i+1) + '"><h2>Group ' + (i+1) + '</h2></div>');
}

$('.group').each(function() {
for (j = 0; j < namespergroup; j++) {
var randname = Math.floor(Math.random() * allnames.length);
if(allnames[randname]){
$(this).append('<p>' + allnames[randname] + '</p>');
}
allnames.splice(randname, 1);
console.log(allnames);
}
});
});

code play in the link, please help
https://code.sololearn.com/WcEDr1cvTDK2/#

Answer 1

Take a look at this: https://code.sololearn.com/WTt7v0ov8zxQ

I iterated over the allnames array instead of the groups collection, I also added a function that returns an array of shuffled names.