Javascript math is incorrect for placing items when clicking buttons

Hey all I have the following code and JSFiddle that I am trying to figure out why its doing the following:

Try this pattern:
•+And
•+And
•+Or (notice it does not place Or)
•+Or (notice it does not place Or)
•+Or (finally does place Or)

Try this pattern:
•+And
•+Or (notice it does not place Or)
•+Or (notice it does place Or)
•+Or (notice it does place Or)
•+Or (notice it does place Or)
•+And (notice it does not place And)
•+And (notice it does not place And)
•+And (notice it does not place And)
•+And (finally does place And)

var numAND = 0;
var numOR = 0;
var andOrBoxTopNum = 5;

/***********************************************
    ___     _   __ ____     ____  ______ _   __
   /   |   / | / // __ \   / __ )/_  __// | / /
  / /| |  /  |/ // / / /  / __  | / /  /  |/ / 
 / ___ | / /|  // /_/ /  / /_/ / / /  / /|  /  
/_/  |_|/_/ |_//_____/  /_____/ /_/  /_/ |_/   
***********************************************/
$(document).ready(function() {
  $("#ANDbtn").click(function() {
    var html = '<div id="ANDArea_' + numAND + '"> \
                        <label \
                            class="control-label" \
                            data-base="AMTdata" \
                            data-definedas="text" \
                            data-required="True" \
                            for="sqlANDbtn' + numAND + '" \
                            style="width: 0px; max-width: 0px;display: none;"> \
                        </label> \
                        <div \
                            class="input-group" \
                            style="display: inline-table; top: ' + andOrBoxTopNum + 'px;">\
                            <span \
                                style="color:rgb(255, 46, 49); position: absolute; z-index: 8; text-transform: uppercase;\
                                        text-shadow: rgba(150, 150, 150, 0.87) 0px 1px 1px; font-family: Arial, Helvetica, sans-serif;\
                                        font-size: 10px; left: -25px; top: 13px; letter-spacing: 1px;">AND</span>\
                            <span \
                                id="lblBG" \
                                style="box-shadow: 0px 5px 6px-4px rgba(0, 0, 0, 0.55); border-radius: 4px; \
                                        border: 1px solid rgba(204, 204, 204, 1); border-image: none; left: -30px; top: 10px; \
                                        width: 35px; height: 16px; position: absolute; z-index: 3; background-color: rgba(238, 238, 238, 1);">\
                            </span> \
                            <div class="input-group-addon"> \
                                <img src="https://cdn1.iconfinder.com/data/icons/hawcons/32/700048-icon-89-document-file-sql-128.png" style="height: 50px" />And here \
                            </div> \
                            <div class="col-sm-10"> \
                                <input \
                                    type="hidden" \
                                    data-tooltip="example 1" \
                                    class="tips form-control" \
                                    id="xtraAND_' + numAND + '" \
                                    value="" \
                                    style="width: 180px; background-color: rgb(254, 231, 231);" \
                                    tabindex="-1" /> \
					        </div> \
                        </div> \
                    </div><!--column stops here-->';

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

    numAND++;
  });

  /**************************************
     ____   ____     ____  ______ _   __
    / __ \ / __ \   / __ )/_  __// | / /
   / / / // /_/ /  / __  | / /  /  |/ / 
  / /_/ // _, _/  / /_/ / / /  / /|  /  
  \____//_/ |_|  /_____/ /_/  /_/ |_/   
  **************************************/
  $("#ORbtn").click(function() {
    var html = '<div id="ORArea_' + numOR + '">\
                        <label \
                            class="control-label" \
                            data-base="AMTdata" \
                            data-definedas="text" \
                            data-required="True" \
                            for="sqlORbtn' + numOR + '" \
                            style="width: 0px; max-width: 0px;display: none;">\
                        </label>\
                        <div \
                            class="input-group" \
                            style="display: inline-table; top: ' + andOrBoxTopNum + 'px;">\
                            <span \
                                style="color:rgb(255, 46, 49); position: absolute; z-index: 8; text-transform: uppercase;\
                                        text-shadow: rgba(150, 150, 150, 0.87) 0px 1px 1px; font-family: Arial, Helvetica, sans-serif;\
                                        font-size: 10px; left: -25px; top: 14px; letter-spacing: 1px;">Or</span>\
                            <span \
                                id="lblBG" \
                                style="box-shadow: 0px 5px 6px-4px rgba(0, 0, 0, 0.55); border-radius: 4px; \
                                        border: 1px solid rgba(204, 204, 204, 1); border-image: none; left: -30px; top: 10px; \
                                        width: 35px; height: 16px; position: absolute; z-index: 3; background-color: rgba(238, 238, 238, 1);">\
                            </span>\
                            <div class="input-group-addon">\
                                <img src="https://cdn1.iconfinder.com/data/icons/hawcons/32/700048-icon-89-document-file-sql-128.png" style="height: 50px" />Or here\
                            </div>\
                            <div class="col-sm-10">\
                                <input \
                                    type="hidden" \
                                    data-tooltip="example 1" \
                                    class="tips form-control" \
                                    id="xtraOR_' + numOR + '" \
                                    value="" \
                                    style="width: 180px; background-color: rgb(254, 231, 231);" \
                                    tabindex="-1" />\
					        </div>\
                        </div>\
                    </div><!--column stops here-->';

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

    numOR++;
  });
});

Open in new window


Where in this code am I getting the calculations wrong? I'm looking for it to place the and or or whenever I hit the corresponding button only once.
StealthrtAsked:
Who is Participating?
 
Julian HansenCommented:
It has to do with how you are managing your id's and incrementing your counters
Let's look at the first part of your OR code
if (numAND > numOR) {
      //Place OR box AFTER previous AND box
      console.log('if: ORArea_' + numAND + ">" + numOR);
      $("#ORArea_" + (numAND + 1)).after(html);
    }

Open in new window


Specifically,
$("#ORArea_" + (numAND + 1)).after(html);

Open in new window

What does this translate to
numAND is 1 - so adding 1 to it when the existing AND is on 0 is not going to work. The above will translate to
$("#ORArea_2").after(html);

Open in new window

Which is accessing a non-existent OR.

Then you have this
//Place OR box AFTER previous AND box

Open in new window

But your code is this
$("#ORArea_" + (numAND + 1)).after(html);

Open in new window

That's placing it after the LAST OR box. Should be
$("#ANDArea_" + (numAND - 1)).after(html);

Open in new window


All of this is pretty academic though, why don't you just append each box to the container
$('#ANDORAreaTableBody').append(html);

Open in new window


$(document).ready(function() {
  $("#ANDbtn").click(function() {
    var html = '<div id="ANDArea_' + numAND + '"> \
                        <label \
                            class="control-label" \
                            data-base="AMTdata" \
                            data-definedas="text" \
                            data-required="True" \
                            for="sqlANDbtn' + numAND + '" \
                            style="width: 0px; max-width: 0px;display: none;"> \
                        </label> \
                        <div \
                            class="input-group" \
                            style="display: inline-table; top: ' + andOrBoxTopNum + 'px;">\
                            <span \
                                style="color:rgb(255, 46, 49); position: absolute; z-index: 8; text-transform: uppercase;\
                                        text-shadow: rgba(150, 150, 150, 0.87) 0px 1px 1px; font-family: Arial, Helvetica, sans-serif;\
                                        font-size: 10px; left: -25px; top: 13px; letter-spacing: 1px;">AND</span>\
                            <span \
                                id="lblBG" \
                                style="box-shadow: 0px 5px 6px-4px rgba(0, 0, 0, 0.55); border-radius: 4px; \
                                        border: 1px solid rgba(204, 204, 204, 1); border-image: none; left: -30px; top: 10px; \
                                        width: 35px; height: 16px; position: absolute; z-index: 3; background-color: rgba(238, 238, 238, 1);">\
                            </span> \
                            <div class="input-group-addon"> \
                                <img src="https://cdn1.iconfinder.com/data/icons/hawcons/32/700048-icon-89-document-file-sql-128.png" style="height: 50px" />And here \
                            </div> \
                            <div class="col-sm-10"> \
                                <input \
                                    type="hidden" \
                                    data-tooltip="example 1" \
                                    class="tips form-control" \
                                    id="xtraAND_' + numAND + '" \
                                    value="" \
                                    style="width: 180px; background-color: rgb(254, 231, 231);" \
                                    tabindex="-1" /> \
					        </div> \
                        </div> \
                    </div><!--column stops here-->';
$('#ANDORAreaTableBody').append(html);
  });

  /**************************************
     ____   ____     ____  ______ _   __
    / __ \ / __ \   / __ )/_  __// | / /
   / / / // /_/ /  / __  | / /  /  |/ / 
  / /_/ // _, _/  / /_/ / / /  / /|  /  
  \____//_/ |_|  /_____/ /_/  /_/ |_/   
  **************************************/
  $("#ORbtn").click(function() {
    var html = '<div id="ORArea_' + numOR + '">\
                        <label \
                            class="control-label" \
                            data-base="AMTdata" \
                            data-definedas="text" \
                            data-required="True" \
                            for="sqlORbtn' + numOR + '" \
                            style="width: 0px; max-width: 0px;display: none;">\
                        </label>\
                        <div \
                            class="input-group" \
                            style="display: inline-table; top: ' + andOrBoxTopNum + 'px;">\
                            <span \
                                style="color:rgb(255, 46, 49); position: absolute; z-index: 8; text-transform: uppercase;\
                                        text-shadow: rgba(150, 150, 150, 0.87) 0px 1px 1px; font-family: Arial, Helvetica, sans-serif;\
                                        font-size: 10px; left: -25px; top: 14px; letter-spacing: 1px;">Or</span>\
                            <span \
                                id="lblBG" \
                                style="box-shadow: 0px 5px 6px-4px rgba(0, 0, 0, 0.55); border-radius: 4px; \
                                        border: 1px solid rgba(204, 204, 204, 1); border-image: none; left: -30px; top: 10px; \
                                        width: 35px; height: 16px; position: absolute; z-index: 3; background-color: rgba(238, 238, 238, 1);">\
                            </span>\
                            <div class="input-group-addon">\
                                <img src="https://cdn1.iconfinder.com/data/icons/hawcons/32/700048-icon-89-document-file-sql-128.png" style="height: 50px" />Or here\
                            </div>\
                            <div class="col-sm-10">\
                                <input \
                                    type="hidden" \
                                    data-tooltip="example 1" \
                                    class="tips form-control" \
                                    id="xtraOR_' + numOR + '" \
                                    value="" \
                                    style="width: 180px; background-color: rgb(254, 231, 231);" \
                                    tabindex="-1" />\
					        </div>\
                        </div>\
                    </div><!--column stops here-->';

$('#ANDORAreaTableBody').append(html);
  });
});

Open in new window

0
 
StealthrtAuthor Commented:
Wow so easy. A classic case of thinking too hard.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.