Change CSS property for just one item

[V]

I'm struggling to figure this out..  So I looped through a query to get category names from my DB. By each category I have an "edit" link. When I click that, a form input should appear by the category name which I'll use to edit and update it.

 

It looks like this..

 

Technology..............edit/cancel

Health..................... edit/cancel

Films........................edit/cancel

 

The js works but when I click "edit", form inputs appear by all the category names instead just the one I clicked on. The code is..

 

 

...DB connect

<style>
.edit {display:none}
</style>

...while loop

..variables

<div class="item" id="<?php echo cat_id; ?>">

<?php echo $cat_name; ?>

<form name="edit" action="save_category.php" method="post" id="<?php echo $cat_id; ?>">
    <input type="hidden" name="cat_id" value="<?php echo $cat_id; ?>" />
    <input type="text" name="edit_cat_name" value="<?php echo $cat_name; ?>" />
    <input type="submit" name="submit_cat" value="Submit!" />
</form>

<div class="edit_button">Edit</div> | <div class="cancel_button">Cancel</div>

</div>

 

I wrapped each category name and input in an "item" div and gave each div a unique id via php (with $cat_id). Also, each form as a unique id value (again with $cat_id). I figured if I can determine if the item id = to the form id I can somehow accomplish what I need.. I'm not exactly sure how tho.. :-\

 

The js is

 

<script type="text/javascript">
$(document).ready(function(){
$('.edit_button').click(function() {

var itemID = $('.item').attr("id");
var editID = $('.edit').attr("id");

$('.edit').css({"display":"inline"});	
})	

$('.cancel_button').click(function() {
  $('.edit').css({"display":"none"});
});
});  
</script>

 

The js successfully picks up the "item" and "edit" ids. Is there a way I can use them to call ".item {display:inline}" only where itemID = editID?