jquery returning only first form data - php

Question

i have a dynamically created form that on click event shows/hides submit and cancel button. Its only returning the first form data. i have searched a lot and no luck. already tried unbind and each helpers. here is the code snippet.
<div class="wojo top right floated div">
<?php if (!$row->counter_offer): ?>
<a id="makeCounter" class="wojo positive label" data-id ="<?php echo $row->id; ?> " ><?php echo 'Make Counter'; ?></a>
<form method="post" id="<?php echo "formID" . $row->id; ?>" class="wojo_form" name="wojo_form">
<input class="wojo black label"type="text" placeholder="Counter Offer" name="offer">
<button type="button" data-action="processOffer" name="submitOffer" class="wojo positive label"
data-set='{ "action": "processOffer",
"id": <?php echo $row->id; ?>,
"current_offer" : "<?php echo $row->offer_price; ?>",
"sender_id" : <?php echo $row->sender_id; ?>
}' >Submit Counter</button>
<a id="<?php echo "cancelID" . $row->id; ?>" class="wojo negative label" data-id ="<?php echo $row->id; ?> "><?php echo Lang::$word->CANCEL; ?></a>
</form>
<?php endif; ?>
<a id="rejectOffer <?php echo $row->id; ?>" class="rejectOffer" data-set='{
"parent": ".segment",
"id": <?php echo $row->id; ?>}' data-content="Remove Offer">
<span id="<?php echo "rejectID" . $row->id; ?>" class="wojo negative label"><?php echo 'Reject Offer'; ?></span></a>
</div>
//
$( document ).ready( function() {
$('.wojo_form').hide();
$('#makeCounter').each(function() {
$(this).unbind('click').click( function() {
alert($('#makeCounter').attr("data-id"));
$('#formID' + $(this).data('id')).show();
$(this).hide();
$('#rejectID' + $(this).data('id')).hide();
$('#cancelID' + $(this).data('id')).click( function() {
$('#formID' + $(this).data('id')).hide();
// $('[id = makeCounter] [data('id') = $(this).data('id')] ').show
$('#makeCounter').show
$('#rejectID' + $(this).data('id')).show();
});
});
});
});
</script>
it only works on the first counter offer button and the second counter offer doesn't do any thing. please help. I'm going nuts here for three days.

Answer 1

The "ID" attribute by definition cannot have duplicates! Since JQuery is aware of this, $('#makeCounter') will only select the first occurrence with that ID.
Also, there is no need to bind each event one by one, you can bind an event to an entire class of elements.
To fix the issue, use a classinstead of an id:
in the PHP:
<a class="wojo positive label makeCounter" data-id ="<?php echo $row->id; ?> " ><?php echo 'Make Counter'; ?></a>
You'll also want to set up your cancel button like this:
<a class="wojo negative label cancelButton" data-id ="<?php echo $row->id; ?> "><?php echo Lang::$word->CANCEL; ?></a>
At this point, the each is unnecessary, you can bind all of them at once like this:
$(".makeCounter").click( function() {
alert($('#makeCounter').attr("data-id"));
$('#formID' + $(this).data('id')).show();
$(this).hide();
$('#rejectID' + $(this).data('id')).hide();
});
$('.cancelButton').click( function() {
$('#formID' + $(this).data('id')).hide();
$('#rejectID' + $(this).data('id')).show();
// check out the JQuery selector here:
$('.makeCounter[data-id="'+$(this).data('id')+'"]').show();
});
(you don't need the unbind either)