Div block after clicked item's row (responsive)

Question

I have a list of products that, when clicked, shows an inline 'popup' that contains more information of the clicked list item.

Now the thing is that this list is also responsive, so on desktop this list would be 4 columns, tablet 3 columns, mobile 2 columns etc.

I know I can use jquery to count these list items and determine after which 'nth' item this 'popup' block needs to be displayed, but how would I achieve this when resizing the browser?

I have set up an example in jsfiddle.

$(".products li").click(function(e) {

  e.preventDefault();
  $(".products li").removeClass("active");
  $(this).addClass("active");
  $(".popup-holder").after( $(".product-popup") );

  var i = $(this).index();
  var r = 4;

  do {
    if ( i > r ) {
      r += 4;
      if ( i == r) {
        r += 4;
      }
    } else {
      i++;
    }
  }
  while ( i != r );

  $(".products li:nth-child("+i+")").after( $(".product-popup") );
  $(".product-popup").show();
  $(".product-popup span").text(i);

});

Underneath a visual example of what I am trying to achieve:

After clicking a list item, the popup displays after the 4th item:

After resizing the browser, the 'popup' should display after the 3rd item:

Answer 1

I would think about this differently. The idea is to first add margin-bottom to current element to create the needed space, then add the element below it using absolute position and we calculate the top position using the current element clicked.

Here is a very simplified example that you can elaborate more to make the calculation more accurate considering different parametres (dynamic content, dynamic height, etc).

$(".products li").click(function(e) {

  e.preventDefault();
  $(".products li").removeClass("active");
  $(this).addClass("active");
  var i = $(this).data('information');

  var top = $(this).position().top + $(this).height();
  $(".product-popup").css('top',top + 30);
  
  $(".product-popup").text(i);
  $(".product-popup").show();
  
});
window.onresize = function(event) {
  if($(".active").length) {
    var top = $(".active").position().top + $(".active").height();
    $(".product-popup").css('top',top + 30);
  }
};

ul.products {
  display: block;
  padding: 0;
  list-style-type: none;
  flex-wrap:wrap;
}

ul.products li {
  display: inline-block;
  padding: 10px;
  margin: 5px;
  width: 20.66666%;
  background-color: #f2f2f2;
  border: 1px solid #000;
  cursor: pointer;
}

ul.products li:before {
  content: '';
  display: block;
  padding-bottom: 50%;
  margin-bottom: 10px;
  width: 100%;
  background-color: #ccc;
}

ul.products li.active {
  background-color: red;
  margin-bottom:80px;
}

.product-popup {
  display: none;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #f2f2f2;
  border: 1px solid #000;
  position:absolute;
  height:50px;
  left:5px;
  right:0;
  
}
.container {
  position:relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<ul class="products">
  <li data-information="More information 1">Example product 1</li>
  <li data-information="More information 2">Example product 2</li>
  <li data-information="More information 3">Example product 3</li>
  <li data-information="More information 4">Example product 4</li>
  <li data-information="More information 5">Example product 5</li>
  <li data-information="More information 6">Example product 6</li>
  <li data-information="More information 7">Example product 7</li>
  <li data-information="More information 8">Example product 8</li>
  <li data-information="More information 9">Example product 9</li>
  <li data-information="More information 10">Example product 10</li>
  <li data-information="More information 11">Example product 11</li>
  <li data-information="More information 12">Example product 12</li>
</ul>
<div class="popup-holder">
  <div class="product-popup"></div>
</div>

</div>

UPDATE

Here is a demo with dynamic content:

$(".products li").click(function(e) {

  e.preventDefault();
  $(".products li").removeClass("active").css('margin-bottom',5);
  $(this).addClass("active");
  var i = $(this).data('information');

  var top = $(this).position().top + $(this).height();
  $(".product-popup").css('top',top + 30);
  
  $(".product-popup").text(i);
  $(this).css('margin-bottom',$(".product-popup").outerHeight());
  $(".product-popup").show();
  
});
window.onresize = function(event) {
  if($(".active").length) {
    var top = $(".active").position().top + $(".active").height();
    $(".product-popup").css('top',top + 30);
    $(".active").css('margin-bottom',$(".product-popup").outerHeight());
  }
};

ul.products {
  display: block;
  padding: 0;
  list-style-type: none;
  flex-wrap:wrap;
}

ul.products li {
  display: inline-block;
  padding: 10px;
  margin: 5px;
  width: 20.66666%;
  background-color: #f2f2f2;
  border: 1px solid #000;
  cursor: pointer;
}

ul.products li:before {
  content: '';
  display: block;
  padding-bottom: 50%;
  margin-bottom: 10px;
  width: 100%;
  background-color: #ccc;
}

ul.products li.active {
  background-color: red;
}

.product-popup {
  display: none;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #f2f2f2;
  border: 1px solid #000;
  position:absolute;
  left:5px;
  right:0;
  
}
.container {
  position:relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<ul class="products">
  <li data-information="lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume">Example product 1</li>
  <li data-information="More information 2">Example product 2</li>
  <li data-information="More information 3">Example product 3</li>
  <li data-information="lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume">Example product 4</li>
  <li data-information="More information 5">Example product 5</li>
  <li data-information="More information 6">Example product 6</li>
  <li data-information="More information 7">Example product 7</li>
  <li data-information="More information 8">Example product 8</li>
  <li data-information="lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume">Example product 9</li>
  <li data-information="More information 10">Example product 10</li>
  <li data-information="More information 11">Example product 11</li>
  <li data-information="More information 12">Example product 12</li>
</ul>
<div class="popup-holder">
  <div class="product-popup"></div>
</div>

</div>

Answer 2

I have done with the position of next element. When you resize the browser also it will work.

var cIt=null;
$(".products li").click(function(e) {

  e.preventDefault();
  cIt=$(this);
  showDetails($(this));
  
});

window.onresize = function(event) {
    if(cIt!=null)
      showDetails(cIt);
};
function showDetails(item){

  $(".products li").removeClass("active");
  item.addClass("active");
  $(".popup-holder").after( $(".product-popup") );

   var i = item.index() +1;

  var elem=item;
  

  while(elem.next().position().top==elem.position().top)
  {
  	elem=elem.next();
  }
  elem.after( $(".product-popup") );
  $(".product-popup").show();
  $(".product-popup span").text(i);
}

ul.products {
  display: block;
  padding: 0;
  list-style-type: none;
}
ul.products li {
  display: inline-block;
  padding: 10px;
  margin: 0 2% 10px 0;
  width: 20.66666%;
  background-color: #f2f2f2;
  border: 1px solid #000;
  cursor: pointer;
}
ul.products li:nth-of-type(4n+4) {
  margin: 0 0 1% 0;
}
ul.products li:before {
  content: '';
  display: block;
  padding-bottom: 50%;
  margin-bottom: 10px;
  width: 100%;
  background-color: #ccc;
}
ul.products li.active {
  background-color: red;
}

.product-popup {
  display: none;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #f2f2f2;
  border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products">
<li data-information="More information 1">Example product 1</li><li data-information="More information 2">Example product 2</li><li data-information="More information 3">Example product 3</li><li data-information="More information 4">Example product 4</li>
<li data-information="More information 5">Example product 5</li><li data-information="More information 6">Example product 6</li><li data-information="More information 7">Example product 7</li><li data-information="More information 8">Example product 8</li><li data-information="More information 9">Example product 9</li><li data-information="More information 10">Example product 10</li><li data-information="More information 11">Example product 11</li><li data-information="More information 12">Example product 12</li>
</ul>

<div class="popup-holder">
  <div class="product-popup">More information (i = <span>0</span>)</div>
</div>