How to group items in dynamic array using Javascript

You could use the array method reduce(). The way reduce works is it applies a function to an accumulator and every item in an array, so essentially its purpose is to “reduce” an array into a single object.

var arr = ["Apple", "Apple", "Banana", "Orange", "Orange", "Orange"];
var groupedElements = arr.reduce(function(groups, item) {
    groups[item] = groups[item] || 0;
    groups[item]++;
    return groups;
  }, {});

console.log(groupedElements);
//is {Apple: 2, Banana: 1, Orange: 3}

Printing out should be handled separately.

If you change fruits to an object that keeps count, you can do

var fruits = {};
var basket = ["Apple", "Apple", "Banana", "Orange", "Orange", "Orange"];

$.each(basket, (_,fruit) => fruit in fruits ? fruits[fruit]++ : fruits[fruit] = 1);
$.each(fruits, (k,v) => {
  $("#table").append("<h1>" + k + "</h1>");
  $.each(Array(v).fill(0), () => $("#table").append("<p>I have " + k + "</p>"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="table"></div>

How about this, just change the console.log lines to append your html:

var basket = ["Apple", "Apple", "Orange", "Orange", "Orange", "Banana"];

for (var i = 0; i < basket.length; i++) { 
  if (basket[i] == basket[i-1]) {
    continue;
  }  
  console.log(basket[i])

  j = i;
  while (basket[i] === basket[j]) {
    console.log(`I have ${basket[i]}`);
    j++;
  }
}

I presume one of the way to resolve the issue is to create a object from the array of basket. The object can have fruit name as key and number of fruit as value.

Then using for..in the result can be appended to the table

var fruits = [''];
var basket = ["Apple", "Apple", "Banana", "Orange", "Orange", "Orange"];
var fruitObject = {}

basket.forEach(function(item) {
  if (fruitObject.hasOwnProperty(item)) {
    fruitObject[item] = fruitObject[item] + 1

  } else {
    fruitObject[item] = 1;

  }
})

for (var keys in fruitObject) {
  $("#table").append("<h1>" + keys + "</h1>");
  for (var i = 0; i < fruitObject[keys]; i++) {
    $("#table").append("I have " + keys + '<br/>');

  }


}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="table"></div>

maybe you need to use if (fruits.indexOf(fruit) !== -1) instead of a for-loop, to check if fruit exist in array or not:

var fruits = [''];
var basket = ["Apple", "Apple", "Banana", "Orange", "Orange", "Orange"];

for (i in basket) { 
    var fruit = basket[i];
    if (fruits.indexOf(fruit) !== -1) {
        // Existing fruit
        $("#table").append("I have " + fruit);
    } else {
        // New fruit
        $("#table").append("<h1>" + fruit + "</h1>");
        $("#table").append("I have " + fruit);
        fruits.push(fruit);
    }
}

Problem with your code:

The problem happens when you enter the inner loop. That loop doesn't search it just compares the first element of the array fruits with the current fruit from the basket array. Due to the existing break statement inside both if and else the loop only iterates over the first element and terminates. Hence the loop is useless and your code is equvalent to:

for (var i = 0; i < basket.length; i++) { 
  var fruit = basket[i];

  var j = 0;
  if (fruit == fruits[j]) {
      $("#table").append("I have " + fruit);
  } else {
      $("#table").append("<h1>" + fruit + "</h1>");
      $("#table").append("I have " + fruit);
      fruits.push(fruit);
  }
}

Since fruits[0] === '' the else statement will be executed for all the fruits as they are all != ''. If you remove the empty string from fruits array, then only Apple will show up right as both Banana and Orange are != "Apple".

What should be done to fix your code:

You must loop through the fruits array to see if the current fruit exists or not before executing any code (the code inside if and else). Or you can use a search function such as indexOf to simpliy the code.

Suggested solution:

If the array is sorted, then just use while to show the "I have ..."s before appending the next h1 element.

var basket = ["Apple", "Apple", "Banana", "Orange", "Orange", "Orange"];

for(var i = 0; i < basket.length; i--) {
  var fruit = basket[i];                                      // the current fruit
  $("#table").append("<h1>" + fruit + "</h1>");               // append a title element
  while(basket[i++] === fruit)                                // while the next fruits are the same:
    $("#table").append("<div>I have " + fruit + "</div>");    // append the "I have ..." text
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="table"></div>

Notice that the for loop decrements i instead of incrementing it. That's because the while is actually responsible for the incrementing, and when a new fruit is encountered, i should go back one step (which the for loop does for us).

Don't append markup to the DOM in a loop (unless it's inevitable). Build the whole markup first and then add it at once

var basket = ["Orange", "Apple", "Orange", "Apple", "Banana", "Orange"];

//generate the markup first, ...
var markup = basket
  //don't mutate the original Array
  .slice().sort()
  //generate the markup for each item in the sorted basket
  .map(function(fruit, index, array) {
    //check wether it's a new group
    var title = (!index || fruit !== array[index - 1]) ?
      "<h1>" + fruit + "</h1>\n" :
      "";
    //just for fun
    var article = /^[aeiou]/i.test(fruit) ? "an" : "a";

    //return the whole markup for this row
    return title + "I have " + article + " " + fruit + "\n";
  })
  .join("")

//... then append the whole markup at once
$("#table").append(markup);

#table {
  white-space: pre;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="table"></div>

or alternatively count how often each fruit appears and then build the rows based on that:

var basket = ["Orange", "Apple", "Orange", "Apple", "Banana", "Orange"];

var countFruits = Object.create(null);

basket.forEach(function(fruit) {
  if (fruit in countFruits) {
    countFruits[fruit]++;
  } else {
    countFruits[fruit] = 1;
  }
});

//generate the markup first, ...
var markup = Object.keys(countFruits).map(function(fruit) {
  var title = "<h1>" + fruit + "</h1>";
  var article = /^[aeiou]/i.test(fruit) ? "an" : "a";
  var row = "I have " + article + " " + fruit + "\n";
  return title + row.repeat(countFruits[fruit]);
}).join("");

//... then append the whole markup at once
$("#table").append(markup);

#table {
  white-space: pre;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="table"></div>

The second example keeps the groups in the order of their first appearance.

I see two bugs in your code:

First one is this: var fruits = ['']; you created array where first element is an empty string. In the loop for (var j = 0; j < fruits.length; j++) you always compare fruit from basket with empty string (and think it is new fruit) and then break from that for loop.

When you break, next fruit in the basket is again compared with empty string (again considered to be new). You never get to compare fruit from the basket with any element from fruits array past index 0.

And at index 0 you have empty string.

If you change var fruits = ['']; to var fruits = []; thing will not work again, since for loop in which you are displaying fruits will never run.

Any way, console.log is your friend. If you put this lines

console.log('fruit=' + fruit, 'j=' + j, 'fruits[j]=' + fruits[j]);
console.log('fruits=', fruits);

just after for (var j = 0; j < fruits.length; j++) { everything will be clear:

fruit=Apple j=0 fruits[j]=  
fruits= Array [ "" ]  
fruit=Apple j=0 fruits[j]=  
fruits= Array [ "", "Apple" ]  
fruit=Banana j=0 fruits[j]=  
fruits= Array [ "", "Apple", "Apple" ]  
fruit=Orange j=0 fruits[j]=  
fruits= Array [ "", "Apple", "Apple", "Banana" ]  
fruit=Orange j=0 fruits[j]=  
fruits= Array [ "", "Apple", "Apple", "Banana", "Orange" ]  
fruit=Orange j=0 fruits[j]=  
fruits= Array [ "", "Apple", "Apple", "Banana", "Orange", "Orange" ]

I will not post correct code since many others already posted the working version.