We Keep Coding

How to use common js function for two divs containig elements of identical ids?

I have common jQuery function and two div tags. Both div tags have different names but both containing elements of identical ids now i want to use this common Jquery function for them both?
I have implemented common function but it's not working for both.
Here's link to my jsfiddle -jsfiddle.net/xS7zF/1/
In my jsfiddle there are two div tags namely example1 and example2 and both tags have elements of identical ids. Function is working fine for first div but not for second.
please help me to sort out this.

Yeah, under the hood, jQuery selection on an ID will use the Document.GetElementById() function implemented by the browser, which is really fast, but (i guess depending on the browser) will stop after it finds the first element, since ID's should be unique and no further searching is needed after the first one is found.
For instance, rename the divs with id="eb" to class="eb" and you can still target specific elements using $("#example1 .eb") and $("#example2 .eb")
UPDATE:
Using your new Fiddle I created this: http://jsfiddle.net/xS7zF/5/
I cleaned up a lot of code and hopefully you can see what I have done. I changed all elements that appear twice from id to class. Now, when you attach an event to an element using $(".classname").click(), it attaches to all the elements. In the handler function where you set HTML and do your show()/hide(), you don't target a specific element using it's ID, but you find it relative to the element that does the event. You can do this using parent(), parentsUntil(), next(), find(), etc. Check jQuery docs for all possibilities. So for instance, the change-handler attaches to all inputs with name=Assets. But instead of doing $("#b1").show(), I go to the parent of the specific input that fires using $(this).parent(). Then I find the element with a class=".b1", which it will only find the one that is next to this specific input and I set the HTML to just that element.
Since there is another input, the same actions happen when THAT input changes, but instead it finds IT's parent, and finds the element with class=".b1" that is next to IT. So both divs with input are contained since they act on elements relative to itself and not across the document.
For extra fun and to show you how flexible this way of programming is, here is a fiddle with the Javascript-code unchanged, but with the exact same question-div copied 8 times. No matter how many times you repeat this, the same code will act on as many divs as you create since everything works relative. http://jsfiddle.net/xS7zF/7/
Hopefully this helps, the rest is up to you!

ID's must be unique, you should not repeat them. You could replace id with class and in the jQuery function do (".ub").each() or manually referencing the object using eq(x). e.g. (".ub").eq(1).

You shouldn't assign same id's to different elements.
You CAN but you SHOULDN'T. Instead of giving the same id, use class

IDs must be unique, try fix this, change to classes.
You can try something like this:
$("div div:first-child")
instead of
$("#eb")
But depends of the rest of your page code. So, change to classes first and use
$(".eb")

when jQuery / javascript find the first ID it would ignore the rest, please read more about it
http://www.w3schools.com/tags/att_global_id.asp

Targeting the last PARENT table-row (tr), not the CHILD table-row (tr)

I'm attempting to target the last parent table row within a table that has children table-row elements inside of it. I've tried the below jQuery to target the :last pseudo, however, like expected, it is targeting the absolute last table-row element within the targets parent table.
$('table[id*="dgRegistrantList"]').find('tr:last').addClass('EventRegLastAttendee')
I've put together a jsFiddle with the HTML block I'm attempting to target with the jQuery, I hope it is helpful!
http://jsfiddle.net/jodriscoll/LZA7e/
The Green table-row is the one I would like to target, however, the one highlighted in Red is the obvious one receiving the class.
This system can generate a variant of table rows depending on the users selection prior to this "Step". For a full example of what I'm working with, visit: http://secure.massgeneral.org/event-form (I'm working with Step 2).
Please be aware that the HTML I'm working with is produced by a CMS software that I as the customer, do not have access to changing. Hence the purpose of this jQuery exercise.

If all the parent <tr> elements have the classes BBListOddRowStyle or BBListEvenRowStyle you can do this:
$('table[id*="dgRegistrantList"]').find('tr[class*=RowStyle]:last')
.addClass('EventRegLastAttendee')
DEMO
If not, you can use .children() twice to make sure you target the right ones:
$('table[id*="dgRegistrantList"]').children('tbody')
.children('tr:last').addClass('EventRegLastAttendee')
DEMO

Use this code to target the last row:
$('table[id*="dgRegistrantList"]').find('tr[class^=BBList][class$=RowStyle]:last').addClass('EventRegLastAttendee')
Explanation:
tr //it will look for tr
[class^=BBList] //which class starts with BBList
[class$=RowStyle] //and ends with RowStyle (so we're leaving Odd and Even inside and not recognized)
:last //the last of those element, if you remove it you select all of them

Is .children() what you're looking to do?
$('table[id*="dgRegistrantList"]').children('tr:last').addClass('EventRegLastAttendee');
.children() only goes down one dom level, while .find() will go down as far as it can.

Don't use find. It will look at any depth and it may match unintended subtables. Perhaps it will work for your example, but you don't want to be acquiring a bad habit. Plus, find will be more costly than a targeted approach.
You want a more targeted approach:
var targetTd = $('table[id*="dgRegistrantList"]').children('tbody').children('tr:last').find('table:first').children('tbody').children('td:last');

use this code to target parent tr last row
$('table[id*="dgRegistrantList"]').find('tr[class^=BBList]:last').addClass('EventRegLastAttendee');

using jquery not() selector in Cufon

I am using Cufon to replace some list items in a nav. There is some content inside a div element (which is inside the list item) that I dont want replaced. I was hoping this would work...
Cufon.replace('li:not("li div")');
But it doesn't.
I realize that if the exclusion applied to a sibling I could use something like...
Cufon.replace('li:not(li.dontreplace)');
But i want to exclude a div which is a CHILD of the LI
Can someone help please?
cheers

If I understand your question correctly, you can use the :has() selector:
Cufon.replace("li:not(:has(div))");

Select a div within a while of divs

How to select a div among a set of divs have the same class? these divs retrieved from a database and shown using a mysql_fetch_array while.
Coz I wanna use/edit information included within each one of these divs.
Any way of act is welcome: jquery, javascript, ..
Regards!

You can use jQuery's :eq selector and/or .eq() function (and their derivatives :first/.first(), :last/.last(), ...) to select a specific div amongst a set of divs by index, if that's what you're asking.
E.g.:
var thirdFooDiv = $("div.foo:eq(2)"); // Third one, first is 0

How to set the HTML of an element's sibling with JQuery

I have a DIV block with 3 DIV elements: upvote, votes, and downvote. When I click on upvote or downvote and call parent.html(html) within a JQuery block of code it overlays the vote count over the upvote or downvote icon. Which JQuery call would I use to gain access to the DIV class, "votes"? Would I find the parent of the parent element and then search for the "votes" class? Are there any ways to find an element's siblings by name? Sorry for the newbie question but I am still very new to JQuery!

Assuming your mark-up is approximately:
<div>
<div class="upvote">vote up</div>
<div class="votes">0</div>
<div class="downvote">vote down</div>
</div>
You could use either:
$('.upvote').siblings('.votes');
Or:
$('.upvote').parent().find('.votes');
References:
siblings(): JS Fiddle,
parent(),
find().
Edited in response to question from OP (in comments):
Ohhhh no it's not a problem with there being more than one sibling '.votes' div. The problem is that there are more than one submissions on a given page and when you upvote one the rest get upvoted as well. I think this is why I need to use $this or something to only use the selected submission. Any ideas?
I'm not sure what, exactly, you mean by 'more than one submissions on a given page,' but I'm assuming you mean, simply, that there are multiple voting elements on the page. If that's the case (and I'm assuming the mark-up is consistently as I approximated in the first part of this answer), you can use:
$('.upvote').click(
function(){
$(this).siblings('.votes');
// this is just a selector, it won't 'do' anything
// other than select the element.
});

There are several different ways to access specific siblings in jQuery. Have a look at them all. You probably want siblings().

$('selector').siblings('.votes')