Как сделать, чтобы блоки появлялись вместо уже существующих?

Здравствуйте. Помогите немного доработать код. Есть код, который рандомно выдает div блоки, которые появляются на пустом месте. Мне нужно сделать, чтобы блоки появлялись не на пустом месте, а заменяли уже находящиеся там другие блоки в которых были прописаны цифры.

<div class="box-container clearfix">
  <div><p>F</p></div>
  <div><p>a</p></div>
  <div><p>d</p></div>
  <div><p>e</p></div>
  <div><p>i</p></div>
  <div><p>n</p></div>
  <div><p>I</p></div>
  <div><p>m</p></div>
  <div><p>g</p></div>
</div>
 
 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

(function (factory) {
  if(typeof module === 'object' && typeof module.exports === 'object') {
    factory(require('jquery'), window, document);
  } else {
    factory(jQuery, window, document);
  }
}(function($, window, document, undefined) {
 
/**
 * @function external:"jQuery.fn".randomFadeIn
 * @arg {null|string|number} [duration='slow'] - Duration. Same to jQuery ".fadeIn()"
 * @arg {boolean} [isLoop=true] - Whether to repeat
 * @return {Object} jQuery object
 */
$.fn.randomFadeIn = function (duration, isLoop) {
  return this.each(function() {
    new $.randomFadeIn(this, duration, isLoop);
  });
};
 
/**
 * @class external:jQuery.randomFadeIn
 * @arg {Object} elem - An element to apply this plugin
 * @arg {null|string|number} duration - Duration. Same to jQuery ".fadeIn()"
 * @arg {boolean} isLoop - Whether to repeat
 * @prop {Object} elemChildren - Children of an element to apply this plugin
 * @prop {string|number} duration - Duration. Same to jQuery ".fadeIn()"
 * @prop {boolean} isLoop - Whether to repeat
 * @prop {Array} order - An array that contains indexes of elements to be shuffled
 */
$.randomFadeIn = function(elem, duration, isLoop) {
  this.elemChildren = $(elem).children();
  $(this.elemChildren).children().stop(true, false).hide();
  this.duration = duration || 'slow';
  this.isLoop = (isLoop === undefined) ? true : isLoop;
 
  // Create an array that contains order
  this.order = [];
  for (var i = 0, len = $(this.elemChildren).length; i < len; i++) {
    this.order[i] = i;
  }
 
  this.order = this._shuffleOrder(this.order);
  this._fadeInEach(0);
};
 
$.extend($.randomFadeIn.prototype, /** @lends external:jQuery.randomFadeIn.prototype */ {
  /**
   * Shuffle the array of elements
   * 
   * @private
   * @arg {Array}  order - An array that contains indexes of elements to be shuffled
   * @return {Array} An shuffled array
   */
  _shuffleOrder: function(order) {
    var idxLast = order.length;
    while (idxLast > 0) {
      var idxRandom = Math.floor(Math.random() * idxLast);
      idxLast--;
      var elemLast = order[idxLast];
 
      // Exchange each other
      order[idxLast]   = order[idxRandom];
      order[idxRandom] = elemLast;
    }
    return order;
  },
 
  /**
   * Run fade-in
   * 
   * @private
   * @arg {number} idx - An index of element to be fade-in
   */
  _fadeInEach: function(idx) {
    var len = $(this.elemChildren).length;
    var self = this;
    $(this.elemChildren).eq(this.order[idx]).children().fadeIn(
      this.duration,
      function() {
        idx++;
        if (idx < len) {
          // Run recursively until all elements fade in
          self._fadeInEach(idx);
        } else if (self.isLoop) {
          // Repeat fadeIn
          $(self.elemChildren).children().fadeOut(self.duration);
          self.order = self._shuffleOrder(self.order);
          self._fadeInEach(0);
        }
      }
    );
  }
}); // end of $.extend
 
}));
 
 
 
$(function() {
  $('.box-container').randomFadeIn();
});

.box-container {
  width: 232px;
}
 
.box-container div {
  float: left;
  height: 50px;
  margin-bottom: 8px;
  margin-right: 8px;
  overflow: hidden;
  width: 50px;
}
 
.box-container div p {
  background: #097;
  box-sizing: border-box;
  color: #fff;
  display: none;
  font-size: 20px;
  height: 100%;
  margin: 0;
  padding-top: 14px;
  text-align: center;
  width: 100%;
}
 
.clearfix:after {
  clear: both;
  content: '';
  display: block;
}