How To Toggle Appended Elements Using Multiple Buttons And Pass Info To The Output Jquery

I have asked kind of a similar question before : how to toggle using multiple buttons and pass info to the output JQuery It was answered well, but this time I am using a different

Solution 1:

I converted all your JavaScript to jQuery since you posted this in the jquery-ui, I am assuming you want to work with jQuery.

I will often organize my functions first and then the interactive actions.

JavaScript

$(function() {
  functionmyFunction() {
    //Do Stuff
  }

  functionAppendFunction(id) {
    var para = $("<p>");
    var home = $("#" + id).val();
    para.append("This is the national team of " + home + ":", $("<br>"), $("<input>", {
      type: "text",
      value: home,
      id: "myInput"
    }), $("<button>").html("Copy Text").click(myFunction));

    $("#gugu").html(para);
  }

  functionemptyOnDocumentClick(event) {
    var action = $(".triggered").length;
    $(".triggered").removeClass("triggered");
    return !action;
  }

  $("#brazil, #russia").on('click', function(e) {
    if ($(this).hasClass("triggered")) {
      return;
    }
    $(this).addClass("triggered");
    var myId = $(this).attr("id");
    AppendFunction(myId);
  });

  $(document).on("click", function(e) {
    if (emptyOnDocumentClick(e)) {
      $("#gugu").html("");
    }
  });
});

Working Example: https://jsfiddle.net/Twisty/nruew82j/91/

The basic concept here is a dialog and if it were me, I would use a dialog box either from BootStrap or jQuery UI. You're not doing that, so we're create the content and append it to a specific <div>. Then, like in your previous question, you just detect a click on the document and decide what that will do. In this case, I emptied the content of the <div> that we'd previously appended content to.

Hope that helps.