Add Html Based On Toggle Jquery

I have a toggle that was just made for a class I am getting to work. I need to add in hidden HTML based upon the toggle state.. Basically it needs to submit with the form with the

Solution 1:

 $(document).ready(function () { 

     $('.visibilitybutton').toggle(function() {
          var $button = $(this);

          $button.prop("title","Invisible");
          $button.find('span').removeClass('icon84').addClass('icon85');
          $('.buttons_secondary').append('<input id="visibility_setting" class="hidden" type="hidden" />');
    }, function() {
          var $button = $(this);

          $button.prop("title","Visible");
          $button.find('span').removeClass('icon85').addClass('icon84');

          // OR Remove by id
          $('.buttons_secondary').find('#visibility_setting').remove();
    });

 });

Solution 2:

You can remove the html you append by id or class like so:

$('.buttons_secondary').append('<input id="hdf_Test" class="hidden" type="hidden" />');

// Remove by class$('.buttons_secondary').find('.hidden').remove();

// OR Remove by id
$('.buttons_secondary').find('#hdf_Test').remove();

Based off of your previous question, I think you should try this:

$(document).ready(function () { 
    $('.button').toggle(function() {
          var $button = $(this);

          $button.prop("title","Invisible");
          $button.find('.icon85').toggleClass('icon85 icon84');
          $('.buttons_secondary').append('<input id="hdf_Test" class="hidden" type="hidden" />');
    }, function() {
          var $button = $(this);

          $button.prop("title","Visible");
          $button.find('.icon85').toggleClass('icon84 icon85');

          // Remove by class
          $('.buttons_secondary').find('.hidden').remove();

          // OR Remove by id
          $('.buttons_secondary').find('#hdf_Test').remove();
    });
 });