how do i get the jquery AppendTo to work

Question

I have been trying to getting this to work but couldn’t do it and I am not going to boar you with my js, which have tried pages to do this!

What I need to do is: if you click on button id=circle, the name of the button which is Circle (C) appendTo the #log and changes the button text ADD to Single (X1), this must be toggled

if you click on the ADD, the name of the square button which is Square (S) appendTo the #log and changes the button text ADD to Single (X1), this must be toggled

if the choose Double (X2), the name of the square button which is Square (S) appendTo the #log and changes the button text ADD to Single (X2), this must be toggled and if this item was already selected as Single it just changes it to Double.

It’s been 3 days that I have been trying to get this to work but always something doesn’t work… Your help would be a blessing!

---

    <div id="accordion">
  <h3>test</h3> 
    <div id="container">
    <div id="tabs">
    <ul class="tabs">
    <li><a href="#tabs-1">red</a></li>
    <li><a href="#tabs-2">green</a></li>
    <li><a href="#tabs-3">blue</a></li>
    </ul>
    <div id="tabs-1">
    <span class="inline-block">
    <img class="topping-icon" src="images/image1.png" alt="" />
    </span>
    <span class="inline-block">
    <button id="circle" class="circle-off" type="submit" name="Circle (c)"></button>
    <button id="square" class="square-off" type="submit" name="Square (S)"></button>
    <button id="oval" class="oval-off" type="submit" name="Oval (O)"></button>
    </span>
    <div class="drop">
    <ul id="menu2" class="menu">
        <li><a href="#" id="add" class="btn">ADD</a>
            <ul>
                <li><a href="#">Single (1X)</a></li>
                <li><a href="#">Double (2X)</a></li>
            </ul>
        </li>
    </ul>
    </div>
</div>
</div>
    </div>
</div>   
<div id="right-panel" class="result">
    <img src="images/myimage.png" alt="" />
    <div id="log"></div>
</div>

Answer 1

Here's a runnable example that shows how to append to the log using jQuery and swap the text of your "Add" button. The HTML is just yours with a few added attributes, namely the value attributes on the buttons. Other than that it is just a few lines of jQuery code to handle your button clicks:

$("button").on("click", function() {
  var text = this.name + "<br\>";
  if ($("#log").html().indexOf(text) == -1)
    $("#log").append(text);
  else
    $("#log").html($("#log").html().replace(text,""));
  $("#add").text(this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">
<div class="wrapper">
<div id="accordion">
  <h3>test</h3> 
    <div id="container">
    <div id="tabs">
    <div id="tabs-1">
    <span class="inline-block">
    <button id="circle" class="circle-off" type="submit" name="Circle (c)" value="Single (x1)">Circle</button>
    <button id="square" class="square-off" type="submit" name="Square (S)" value="Double (x2)">Square</button>
    <button id="oval" class="oval-off" type="submit" name="Oval (O)" value="Single (x1)">Oval</button>
    </span>
    <div class="drop">
    <ul id="menu2" class="menu">
        <li><a href="#" id="add" class="btn">ADD</a>
            <ul>
                <li><a href="#">Single (1X)</a></li>
                <li><a href="#">Double (2X)</a></li>
            </ul>
        </li>
    </ul>
    </div>
</div>


<div id="right-panel" class="result">
    <div id="log"></div>
    </div>

</div>
</div>