One way to improve your code is by utilizing the arr.push() method when adding elements to an array within a for loop. Make sure to declare newArr as an empty array before using it.

Upon reviewing your groups function, it seems like there might be a misunderstanding in your approach. It appears that you are randomly selecting a name from the list and then repeatedly assigning that same name to the new array for each item in the original list.

A helpful technique could be to create pseudo-code outlining the desired steps before translating them into Javascript. This method can assist in identifying any inconsistencies or issues more easily compared to analyzing complex code directly.

I hope these suggestions prove beneficial. Feel free to reach out if you require further clarification or assistance!

Unclear about the purpose of your function groups. It seems to take all the data in arr and place it in newarr with a random sequence. You might want to consider using the .push() method to create a new array instead. This should help streamline your code.

Example:

var newarr = ["David", "Mic"];
newarr.push("Adeline");

Outcome: Your newarr will now contain all 3 names.

Here is my take on your query. I hope this provides some clarity.

    <script>
    var arr = new Array();   
    function yeah()
    {
    arr = prompt("Enter your names").split(",")
    console.log(arr);
    //var random = arr[Math.floor(Math.random() * arr.length)];
    var allStudents ="";

    for(var i=0; i<arr.length; i++) {
        allStudents += arr[i] + "<br/>\n";
    }

     document.getElementById("h2").innerHTML = allStudents;
    }


    function groups()
    {  
        var arr = prompt("Enter your names").split(",");

        var groups = document.getElementById("groups").value;
        var perGrp = document.getElementById("per_grp").value;

        var innerText = "<h4>All</h4> ";
        for(var i=0; i<arr.length; i++) {
            innerText += arr[i] + ",";
        }
        innerText += "<br/>\n";            


        arr = shuffleArray(arr);

        var finalGroups = new Array();

        for(var i=0; i<groups; i++) {
            // assign shuffled elements
            var grpArr = "";
            for(j=0; j<perGrp; j++) {
                grpArr += arr[0] + ",";
                arr.shift(); // removes first element from array    
            }

            grpArr = grpArr.substring(0,grpArr.length - 1);
            finalGroups[i] = grpArr;
        }




        innerText += "<h4>Groups</h4><br/>\n";
        innerText += "<table width='100%' border='1'><tr>\n";           
        for(var i=0; i<groups; i++) {
            // print groups
            var j=i+1;
            var grpArr = finalGroups[i].split(",");
            innerText += "<td>Group " +j+"<br>";
            for(var k=0; k < grpArr.length; k++){
              innerText += grpArr[k] + "<br>";
            }

            innerText += "</td>\n";
        }
        innerText += "</tr></table>\n";

        document.getElementById("FinalGroups").innerHTML = innerText;


   } 

   /**
    * Randomize array element order in-place.
    * Using Durstenfeld shuffle algorithm.
    */
   function shuffleArray(array) {
       for (var i = array.length - 1; i > 0; i--) {
           var j = Math.floor(Math.random() * (i + 1));
           var temp = array[i];
           array[i] = array[j];
           array[j] = temp;
       }
       return array;
   }


</script>
    <style>
    /* Reset */
      * {
            margin: 0;
            padding: 0;
      }

      html,body {
        height:100%;
        margin:0;
        font-family: 'Montserrat', 'sans-serif';
        color:#424242;
        overflow: hidden;
      }
      .display {
        text-align: center;
        display: table;
        height:100%;
        margin:0 auto;
      }
      .wrap {
        display: table-cell;
        vertical-align: middle;
      }
      p {
        font-size: 30px; /* For lamers who don't support viewport sizing */
        font-size:10vmin;
        text-align: center;
        margin: 0;
      }
    #h2 {
        float: center;
        font-size: 10vmin;

        background-size: contain;

    }
      input.text-display {
        display: inline-block;
        color: #5E5E5E;
        font: bold 20px arial;
        text-decoration: none;
        text-align: center;
        margin: 20px auto;
        padding: 15px 20px;
        background: #EFF0F2;
        border-radius: 4px;
        border-top: 1px solid #F5F5F5;
        box-shadow: inset 0 0 25px #E8E8E8, 0 1px 0 #C3C3C3, 0 2px 0 #C9C9C9, 0 2px 3px #333;
        text-shadow: 0px 1px 0px #F5F5F5;
      }

      span.love {
        display: block;
        position: absolute;
        bottom:10px;
        width: 100%;
        text-align: center;
      }
      span.love a {
        text-decoration: none;
        color:#D12026;
      }
      .twitter-follow-button {
        vertical-align: text-bottom;
      }
      .twitter-share-button {
        vertical-align: text-bottom;
      }


    </style>

    <div class="display">
        <div class="wrap">
            <p>Generating Random Groups</p>
            <!--<div id="h2"> </div>

            <input  class="text-display" type="button" onclick="yeah()"  value="click to input data"> -->
           <!-- <input type="button" onclick="display()" value="display random"> -->
            <br>
            <input id="groups" placeholder="Specify number of Groups" >
            <input id="per_grp" placeholder="Specify number of members per Group">
            <br/>
            <input type="button" value="Create Groups" onclick="groups()">
            <div id="FinalGroups"></div>
        </div>



    </div>