Добавить html к ближайшему div кнопки с указанным классом с помощью javascript jquery

Вы хотите добавить родственного брата в строку формы, а не в контент. Для этого вы можете использовать insertAfter() или after().

$(document.body).on('click', '.add_row', function (e) {
  $(e.target).closest('.form-row').after('<div class = "form-row">Content</div>');
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form-row'>
  <div class='col-2'>
    Blah Blah
  </div>
  <div class='col-4'>
    <button type='button' class='add_row'>+</button>
  </div>
</div>
<div class='form-row'>
  <div class='col-2'>
    Blah Blah
  </div>
  <div class='col-4'>
    <button type='button' class='add_row'>+</button>
  </div>
</div>

изменить: используйте $(el).after(), например, @Taplar. Обновленный код ниже

Когда вы делаете $(el).append(...), вы добавляете в $(el). Вы хотите добавить к родительскому элементу $(el), также известному как $(el).parent().

$(function() {
  $(document).on('click', '.add_row', function () {

  $(this).closest('.form-row').after("<div class='form-row'>div contents</div>");
 });
});

Обратите внимание: если вы хотите скопировать .form-row, вам необходимо клонировать его перед добавлением.

$(function() {
  $(document).on('click', '.add_row', function () {
    const $formRow = $(this).closest('.form-row');
    $formRow.parent().after($formRow.clone());
  });
});

Vanilla Javascript, для справки:

const $formRow = document.querySelector('.form-row');

document.onclick = (e) => {
  if (!e.target.classList.contains('add_row')) return;
  $container.after($formRow.cloneNode(true));
};

небольшое изменение в вашем коде

$(document).on('click', '.add_row', function (e) {
  $(this).closest('.form-row').clone().insertAfter($(this).closest('.form-row'));
});