jQuery do not insterAfter a class if next class is specific

Question

I am looking for a solution to my problem. The situation is as follows. I have the following div's

<div class="group">
    <div class="A1_B1 symptom">Bla Bla Bla</div>
    <div class="class1 symptom">Bla Bla Bla</div>
    <div class="A1_B1 symptom">Foo Foo Foo</div>
    <div class="A1_B3 symptom">Con Con Con</div>
    <div class="A1_B1 symptom"><a href="#" class="connect">Click Me</a></div>
</div>

When I click the DIV class="A1_B1", I have to instert some html after class="A1_B1" with the following conditions: (i) The html should not be inserted after the clicked DIV. (ii) The html should not be inserted after any DIV that has the immediate next class="class1".

Based on the given conditions, the html should appear like this -

<div class="group">
    <div class="A1_B1 symptom">Bla Bla Bla</div>
    <div class="class1 symptom">Bla Bla Bla</div>
    <div class="A1_B1 symptom">Foo Foo Foo</div>
    <div class='class2'>Bar Bar Bar</div>
    <div class="A1_B3 symptom">Con Con Con</div>
    <div class="A1_B1 symptom"><a href="#" class="connect">Click Me</a></div>
</div>

...and here is what I have written, which does not work. Can anyone help me with this problem. Thanks in advance.

$(document).on("click", ".connect", function (ev) {
var thisClass = $(this).parents('div.symptom').attr('class');
var html = "<div class='class2'>Bar Bar Bar</div>";
 $(html).insertAfter("A1_B1":not("."+thisClass).next('div:not(.class1)'));
});

Answer 1

You can use .eachloop to iterate through your symptom divs .Then, inside this check if next div doesn't have class class1 depending on this add your html after that div .

Demo Code :

$(document).on("click", ".connect", function(ev) {
  var selector = $(this).closest(".group")
  var not_to_compare = $(this).parent();
  //loop through all divs ..
  selector.find(".A1_B1").not(not_to_compare).each(function() {
    //if neext class is not class1
    if (!$(this).next().hasClass("class1")) {
      var html = "<div class='class2'>Bar Bar Bar</div>";
      $(html).insertAfter($(this)) //add there
    }
  })
});

.class2 {
  color: red
}

.class1 {
  color: blue
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="group">
  <div class="A1_B1 symptom">Bla Bla Bla</div>
  <div class="class1 symptom">Bla Bla Bla</div>
  <div class="A1_B1 symptom">Foo Foo Foo</div>
  <div class="A1_B3 symptom">Con Con Con</div>
  <div class="A1_B1 symptom"><a href="#" class="connect">Click Me</a></div>
</div>

Answer 2

I couldn't understand what are you trying to achieve but to match the conditions you may use insertBefore instead.

$('.connect').on("click", function (ev) {
  var html = '<div class="class2">Bar Bar Bar</div>';
  $(html).insertBefore($(this).parent());
});

You can insertBefore the parent of the anchor element. Satisfies both the conditions. However I think you should provide more test cases in case this is not what you are looking for.