Editable (jQuery In Place Editor): How to make text that was not selected, editable

Question

I am doing some experimenting (so the code below has lots of stuff that I wouldn't normally put in). I have pairs of spans (that have the same ID). In this exampel there are 2 with ID=42 and 2 with ID=43. Currently, when I click on the text of one of the ID=42s, both ID 42s highlight in red.

Using the plugin from http://arashkarimzadeh.com/index.php/jquery/7-editable-jquery-plugin.html, I added

$(function(){$('.test').editable()});

And that allows the text that is selected to become editable. What I want to do, is if ID=42 is clicked, the other ID=42 is editable -- not the one that is clicked. There will only ever be a max of two IDs with the same ID. What can I add to this code to loop through and make the change?

.selected { color:red; }

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.editable-1.3.3.js"></script>

<script type="text/javascript">

$(function(){$('.test').editable()});

$(".testClass").click(function () {
    if ( $('.testClass').hasClass('selected') ) {
        $('.testClass').removeClass('selected');                    
    }           
    var thisTarget = $(this).attr('id');            
    $('#container').find('#'+thisTarget).toggleClass("selected", 1000);             
    return false;
});

</script>




<p>
<span id="42" class="testClass">            
    <span class="test">Click me (I need to turn red)</span>     
</span>
</p>
<p>
<span id="43" class="testClass">            
    <span class="test">just another test</span>
</span>     
</p>        
<p>
<span id="42" class="testClass">            
    <span class="test">And I become editable</span>
</span>     
</p>        
<p>
<span id="43" class="testClass">            
    <span class="test">just another test</span>
</span>     
</p>            

Answer 1

First off, there's no such thing as two of the same ID. IDs are always unique, meaning that you cannot have more than one on the same page that has the same name. (I'm also a little confused because although you say there are two 42s and two 43s, there is actually only one of each in your code. Make sure you understand that the child <span> does not have an ID of 42 or 43.) PS: IDs/classes cannot begin with numerals.

If you want to click on .test and then manipulate its parent (id=42), that's fairly simple to do:

$('.test').click(function(){
    var parent = $(this).parent();
    // Manipulate the parent (id=42, 43) however you want here
    parent.css('background', '#000');
});

I'm unfamiliar with the plugin you linked, but using this method you should be able to manipulate the parent however you want. However, I don't really see how this should be a problem for you, since you can just as easily attach the onclick event to id=42, or for your purposes, use the following:

$(function(){$('#42, #43').editable()});