insert div after nth child in bootstrap grid

Question

I've been searching for hours, but just can't figure this out... I have a Bootstrap grid and need to inject a div on click after the row where the clicked div is. So, for example, I have 50 lines like

<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_1</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_2</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_3</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_4</div>
.
.
.
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_50</div>

Now, on a large screen, that's 6 columns per row. If I click on the 3rd div, I need to inject a new div after the 6th. If I click on the 15th div, a new div should be injected after the 18th. I've tried using div:nth-child(6n) but it only works for first row, not the rest.

Can anyone please point me in the right direction? THANK YOU!

Answer 1

Try the logic as shown.

  $('div.col-xs-6').on('click', function() {
    var divNo = $('div.col-xs-6').index(this) + 1;
    var insertAfterindex = parseInt((divNo / 6) + 1) * 6;
    if ($('div.col-xs-6').eq(insertAfterindex - 1).length > 0)
      $('div.col-xs-6').eq(insertAfterindex - 1).after('<div>Test</div>');
    else
      $('div.col-xs-6').last().after('<div>Test</div>');
  });

$(document).ready(function() {
  $('div.col-xs-6').on('click', function() {
    var divNo = $('div.col-xs-6').index(this) + 1;
    var insertAfterindex = parseInt((divNo / 6) + 1) * 6;
    if ($('div.col-xs-6').eq(insertAfterindex - 1).length > 0)
      $('div.col-xs-6').eq(insertAfterindex - 1).after('<div>Test</div>');
    else
      $('div.col-xs-6').last().after('<div>Test</div>');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_1</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_2</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_3</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_4</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_5</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_6</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_7</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_8</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_9</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_10</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_11</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_12</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_13</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_14</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_15</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_16</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_17</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_18</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_19</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-2">contents_20</div>