Как добавить единственное закрывающее div перед элементом в html '</div>'

Question

Я генерирую серию столбцов (шаблонов HTML), которые генерируются в PHP.

Сетка это materializecss, то есть Material Design.

Что я хочу сделать, это добавить еще одну строку s12, которая является шаблоном HTML, который занимает всю строку под выбранным div, но сначала мне нужно закрыть строку, в которой находится выбранный столбец через </div>.

Я пробовал через innerHTML и insertAfter(), но не повезло.

<div class='container'>
   <div class='row' >
      <div class='col s6' data-index-value='2'> <!-- This column is dynamically added-->
         <div class="holder-for-blah">
            <p>Blah</p>
            <button id='clicky'>Click to more information about</button>
         </div>
      </div>
   </div>
</div>

// My attempts 
let htmlString = "<div><p>More information section</p></div>";
newDiv = document.createElement('div');
newDiv.innerHTML = htmlString;
newDiv.innerHTML = "</div>" + htmlString
// result is undefined


$( "</div>" + newDiv ).insertAfter( "[data-index-value='2']" ) );
// after a successful response, the new html is simple not added to the DOM


//and even, adding the closing div first and then the element
$( "</div>").insertAfter(  "[data-index-value='2']"  ) );
$( newDiv ).insertAfter( $(  "[data-index-value='2']" );

Я уже пытался получить innerHTML и insertAfter.

ОБНОВЛЕННОЕ РЕДАКТИРОВАНИЕ С ИЗОБРАЖЕНИЯМИ:

Начальная сетка (отлично) Стартовая сетка

Когда пользователь нажимает на последний столбец Отображается нормально, Последний выбранный столбец

Причина, по которой я пытаюсь «закрыть ряд», заключается в этой проблеме. При щелчке по первому или второму столбцу он запутывается