disable click function for all other divs

[V]

I'm using Jquery to make an editing system. For example I have a list of category names. Each one has an "edit" link next to it.

 

 

Sports.................edit

Technology.........edit

Health.................edit

 

 

When I click edit, the category name is sent to an input (which replaces the plain text) and the edit button switches to "save". Now I can edit the category name.

 

 

Sports.................edit

__________________

|                                  |

|Technology                |  save

|_________________ |

 

Health.................edit

 

 

The problem is.. if I click edit on more than one categories, multiple inputs appear. When I'm editing 1 category I want to disable the edit link for all the others. Is there any way to that in my code?

 

 

<a href="#" class="edit" id="1">Edit</a>
<div class="cat_name1">Sports</div>
<input type="text" class="cat_input1"/>

<a href="#" class="edit" id="2">Edit</a>
<div class="cat_name2">Technology</div>
<input type="text" class="cat_input2"/>

<a href="#" class="edit" id="3">Edit</a>
<div class="cat_name3">Health</div>
<input type="text" class="cat_input3"/>

 

 

(The js is longer but I only added the part I think matters)

 

<script type="text/javascript">
$('.edit').click(function()
{
var cat_id = $(this).attr("id"); //get unique category ID from .edit div, to edit categories individually
var cat_name = $('.cat_name'+cat_id+'').html(); //get html from .cat_name div where cat_id = id retrieved from .edit div
$('.cat_input'+cat_id+'').val(cat_name); //add html from cat_name div to input value where cat_id = id retrieved from .edit div
});
</script>

 

I tried some if statements (not worthy of posting.. ) with $(.edit).hide(); but nothing happens. I'm just trying to detect .edit divs with different id's than the one I clicked on and disable them but not sure how to achieve that with js..