jquery add remove form input on toggle

Question

I have the following html and form elements

<div class='ticket-sold' id='1' >RAFFLE-1-NOVEMBER</div>
<div class='ticket' id='2'>RAFFLE-2-NOVEMBER</div>
<div class='ticket' id='3'>RAFFLE-3-NOVEMBER</div>
<div class='ticket' id='4'>RAFFLE-4-NOVEMBER</div>
<div class='ticket' id='5'>RAFFLE-5-NOVEMBER</div>

<form class="paypal" action="./includes/gateways/payments.php" method="post" id="paypal_form" target="_blank">
    <input type="hidden" name="cmd" value="_xclick" />
    <input type="hidden" name="no_note" value="1" />
    <input type="hidden" name="lc" value="UK" />
    <input type="hidden" name="currency_code" value="GBP" />
    <input type="hidden" name="payer_email" value="customer@example.com"  />
   <input name="item_name_1" value="TICKET NUMBER 5" id="input_5" type="hidden">
   <input name="item_name_2" value="TICKET NUMBER 20" id="input_20" type="hidden">
   <input name="item_name_3" value="TICKET NUMBER 27" id="input_27" type="hidden">
   <input type="hidden" name="amount_1" value="10" id="input_5" />
   <input type="hidden" name="amount_2" value="10" id="input_20" />
   <input type="hidden" name="amount_3" value="10" id="input_27" />
   <input type="submit" name="submit" value="Submit Payment"/>
</form>

Basically, I have jquery that when the Div class 'ticket' is selected, the 'amount' field is updated based on the number of 'ticket' elements selected.

var counter = 0;
$(".ticket").on("click", function() {
$(this).toggleClass("green");
$(this).toggleClass('selected');
var selectedIds = $('.selected').map(function() {
        return this.id;
}).get();
var id = $(this).attr('id');  
if(!$(this).hasClass('selected')) {
    $('#paypal_form #input_' + id).remove();
    counter--;
} else {
    counter++;
    $('#paypal_form').append('<input type="hidden" name="item_name_'+counter+'" value="TICKET NUMBER ' + id + '" id="input_'+id+'">');
    $('#paypal_form').append('<input type="hidden" name="amount_'+counter+'" value="' + $(".ticketprice").text() +'" id="input_'+id +'">');
    }   
    $(".totaltickets").text(selectedIds.length -1);
    $(".totalprice").text((selectedIds.length - 1)*$(".ticketprice").text()); 

What I would like to do, is at the same time of the onclick function on the 'ticket' div, I would like another input type ie <input type="hidden" name="item_name" value="Selected ID from Div"> added dynamically to the Form ("paypal_form"). And if the 'ticket' DIV is toggled, ie Clicked to deselect the item, the added element should be removed.

thanks Craig.

Answer 1

You could approach it similar to this. It checks if the class selected is assigned to the selected div. If so, it appends a hidden input with a specific ID to the form. If the div is unselected, it removes that input from the form.

 $(document).ready(function() { $(".ticket").on("click", function() { $(this).toggleClass("green"); $(this).toggleClass('selected'); var selectedIds = $('.selected').map(function() { return this.id; }).get(); var id = $(this).attr('id'); if(!$(this).hasClass('selected')) { $('#paypal_form #input_' + id).remove(); } else { $('#paypal_form').append('<input type="hidden" id="input_' + id + '">'); } $('[name=amount]').val((selectedIds.length - 1) * $(".ticketprice").text()); $('[name=item_name]').val((selectedIds.length - 1) + " Ticket(s) selected"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='ticket-sold' id='1'>RAFFLE-1-NOVEMBER</div> <div class='ticket' id='2'>RAFFLE-2-NOVEMBER</div> <div class='ticket' id='3'>RAFFLE-3-NOVEMBER</div> <div class='ticket' id='4'>RAFFLE-4-NOVEMBER</div> <div class='ticket' id='5'>RAFFLE-5-NOVEMBER</div> <form class="paypal" action="./includes/gateways/payments.php" method="post" id="paypal_form" target="_blank"> <input type="hidden" name="cmd" value="_xclick" /> <input type="hidden" name="no_note" value="1" /> <input type="hidden" name="lc" value="UK" /> <input type="hidden" name="currency_code" value="GBP" /> <input type="hidden" name="payer_email" value="customer@example.com" /> <input type="hidden" name="item_name" value="" /> <input type="hidden" name="amount" value="0" /> <input type="submit" name="submit" value="Submit Payment" /> </form> 

Answer 2

figured it out with the following

var ii = 1; 
$("input[name^='item_name']").each(function(i){ 
    $(this).attr('name', 'item_name_' + ii++); 
}); 
var ii = 1; 
$("input[name^='amount']").each(function(i){ 
    $(this).attr('name','amount_' + ii++); 
}); 

thanks for your help :)