jquery button affecting all instances in loop

Question

I've got a form that uses jquery/Ajax to update my database without a refresh. The jquery fades out the radio options on submit, and then shows another button in case the user would like to change their selection.

My problem is that once the user submits their decisions, if they click the "change your mind" button, the jquery brings back the radios for ALL instances below.

How can that "change your mind" button bring back the radios for ONLY that instance? Sorry for the complicated scenario and chunk of code. If you need more info or explanation, just ask!

Thanks.

<? $result = $mysqli->query("SELECT * FROM items WHERE Job='$job'") or die(mysqli_error($mysqli));
while( $row = $result->fetch_assoc() ){ ?>
        <div class='tile'>

            <script type="text/javascript">
                $('document').ready(function(){
                    $('#form<?= $row['Id'] ?>').ajaxForm({
                        target: '#preview<?= $row['Id'] ?>',
                        success: function() {
                            $('#formbox<?= $row['Id'] ?>').fadeOut('slow'),
                            $('#preview<?= $row['Id'] ?>').fadeIn('slow');
                            $("button").click(function () {
                                $("#preview<?= $row['Id'] ?>").fadeOut("slow"),
                                $("#formbox<?= $row['Id'] ?>").fadeIn("slow");});
                        }
                    });
                });
            </script> 

            <div class='details'>
                <div id='radios' style='position:relative; height:25px;'>
                    <div id="preview<?= $row['Id'] ?>" style="width:258px; margin-left:-129px; left:50%; display:none; position:absolute;">
                        <button>Way to go! Click here to change your mind.</button>
                    </div>
                    <div id="formbox<?= $row['Id'] ?>" style='position:absolute;'> 
                    <form name='' id='form<?= $row['Id'] ?>' action='js/submit.php' method='post'>
                        <label>Keep:</label><input type='radio' name='dec[]' value='keep' <? if($row['Dec1']=='keep'){echo "checked='checked'";} ?> >
                        <label>Donate:</label><input type='radio' name='dec[]' value='donate' <? if($row['Dec1']=='donate'){echo "checked='checked'";} ?> >
                        <label>Sell:</label><input type='radio' name='dec[]' value='sell' <? if($row['Dec1']=='sell'){echo "checked='checked'";} ?> >
                        <label>Trash:</label><input type='radio' name='dec[]' value='trash' <? if($row['Dec1']=='trash'){echo "checked='checked'";} ?> >
                        <label>Give To:</label><input type='text' name='dec[]' size='15' <? if($row['Dec1']!='keep' && $row['Dec1']!='donate' && $row['Dec1']!='sell' && $row['Dec1']!='trash'){echo "value='".$row['Dec1']."'";} ?> >
                        <input type='hidden' name='id' value='<?= $row['Id'] ?>' />
                        <input type="submit" value="Submit">
                    </form>
                </div>
            </div>
        </div>
    </div>
<? 
} 

Answer 1

The problem is that every time you submit the form, you add click handler to the all the buttons that fades in that set of radios. When you submit a different form, you never remove the previous handlers, so it fades them all in again.

Instead of having lots of different handlers, with $row['Id'] substituted into each, you should bind a the .ajaxForm() to a class. It should make use of $(this) and DOM traversal functions to operate on just the form you clicked on.

Also, I don't think it's related to the problem, but your id='radios' doesn't have the row ID appended, so you're creating duplicate IDs for those elements.

I think this should do it: (FIDDLE)

<script type="text/javascript">
$('document').ready(function() {
    $('.form').ajaxForm({
        success: function(responseText, statusText, xhr, elem) {
            var formbox = elem.closest('.formbox');
            formbox.fadeOut('slow');
            formbox.siblings(".preview").fadeIn('slow');
        }
    });
    $("button").click(function() {
        var preview = $(this).closest(".preview");
        preview.fadeOut("slow");
        preview.siblings(".formbox").fadeIn("slow");
    });
});​
</script> 

<? $result = $mysqli->query("SELECT * FROM items WHERE Job='$job'") or die(mysqli_error($mysqli));
while( $row = $result->fetch_assoc() ){ ?>
        <div class='tile'>
            <div class='details'>
                <div class='radios' style='position:relative; height:25px;'>
                    <div class="preview" style="width:258px; margin-left:-129px; left:50%; display:none; position:absolute;">
                        <button>Way to go! Click here to change your mind.</button>
                    </div>
                    <div class="formbox" style='position:absolute;'> 
                    <form name='' class='form' action='js/submit.php' method='post'>
                        <label>Keep:</label><input type='radio' name='dec[]' value='keep' <? if($row['Dec1']=='keep'){echo "checked='checked'";} ?> >
                        <label>Donate:</label><input type='radio' name='dec[]' value='donate' <? if($row['Dec1']=='donate'){echo "checked='checked'";} ?> >
                        <label>Sell:</label><input type='radio' name='dec[]' value='sell' <? if($row['Dec1']=='sell'){echo "checked='checked'";} ?> >
                        <label>Trash:</label><input type='radio' name='dec[]' value='trash' <? if($row['Dec1']=='trash'){echo "checked='checked'";} ?> >
                        <label>Give To:</label><input type='text' name='dec[]' size='15' <? if($row['Dec1']!='keep' && $row['Dec1']!='donate' && $row['Dec1']!='sell' && $row['Dec1']!='trash'){echo "value='".$row['Dec1']."'";} ?> >
                        <input type='hidden' name='id' value='<?= $row['Id'] ?>' />
                        <input type="submit" value="Submit">
                    </form>
                </div>
            </div>
        </div>
    </div>
<? 
}