jQuery按顺序放置AND / OR输入框

Question

Hey all I am trying to find the "sweet spot" so that this will work as I am needing it to.

Below is my current JS code that I am working with.

AND BOX code:

$("#ANDbtn").click(function() {
   if (numOR > numAND) {
       //Place AND box AFTER previous OR box
       $("#ANDArea_" + (numOR + 1)).after(html);
       console.log('if: ANDArea_' + numOR + ">" + numAND);
   } else if (numAND > numOR) {
       //Place AND box AFTER previous AND box
       $("#ANDArea_" + (numAND - 1)).after(html);
       console.log('else if: ANDArea_' + numAND + ">" + numOR);
   } else {
       //There is no AND box so lets add the first one
       $("#ANDORArea").after(html);
       console.log('else');
   }

   numAND++;
});

OR BOX code:

$("#ORbtn").click(function() {
   if (numAND > numOR) {
       //Place OR box AFTER previous AND box
       $("#ORArea_" + (numAND + 1)).after(html);
       console.log('if: ORArea_' + numAND + ">" + numOR);
   } else if (numOR > numAND) {
       //Place OR box AFTER previous OR box
       $("#ORArea_" + (numOR - 1)).after(html);
       console.log('else if: ORArea_' + numOR + ">" + numAND);
   } else {
       //There is no OR box so lets add the first one
       $("#ANDORArea").after(html);
       console.log('else');
   }

   numOR++;
});

Each time the user pushes the button AND it adds 1 to the variable numAND . Likewise, when the user pushes the OR button it adds a 1 to the variable numOR . Both variables start at 0 .

When the user pushes the AND button it places the AND box on the screen (which goes to the else in the logic above) and if the user pushes the AND button again it places the AND box AFTER the previous AND box (which goes to the else if in the logic above).

The same goes for the OR box as well. When the user pushes the OR button it places the OR box on the screen (which goes to the else in the logic above) and if the user pushes the OR button again it places the OR box AFTER the previous OR box (which goes to the else if in the logic above).

So all that works just fine. Where I am having the issue is when I hit the AND button an AND box shows up and then hit the OR button - it does not place the OR box BELOW the AND box and vise versa .

Here's a FIDDLER for you're viewing pleasure.

Answer 1

You're using the after jQuery function to place some of the elements, which is sticking the elements after the #ANDORArea row instead of at the end of the table. I believe you want to append the elements to the end of the table. To do that you'd replace $("#ANDORArea").after(html) with something along the lines of $("#ANDORAreaTableBody").append(html) such that the elements are placed at the end of the table, below the other elements.

Check this fiddle to see it in action.