Using variable to add and remove a form input field with jQuery
<p>I am trying to add a hidden input field to a form when a span with class="checkbox" is clicked, and remove that same field when span with checkmark is clicked.</p>

<p>I am able to add the input, but <strong>I cannot remove it</strong>. </p>

<p>My HTML:</p>

<pre><code>&lt;span title="Here's My Title" class="wishlistcheck checkbox"&gt;1&lt;/span&gt;

&lt;form id="wishlistform"&gt;&lt;/form&gt;
</code></pre>

<p>My Javascript:</p>

<pre><code>$(document).ready(function() {

    var appNum = 0;

    $("span.wishlistcheck").click(function() {
        var el = $(this);
        var appName = el.attr("title");

        var isChecked = el.hasClass('checkmark');
        if(!isChecked) {
            el.removeClass('checkbox');
            el.addClass('checkmark');

            appNum++

            $("#wishlistform").append("&lt;input id=\"" + appName + "\" type=\"hidden\" name=\"product_" + appNum + "\" value=\"" + appName + "\"&gt;");


        } else {
            el.removeClass('checkmark');
            el.addClass('checkbox');

            appNum--

            $("input#" + appName).remove();




        }
    });
});
</code></pre>
