div position apply to another div error - css

Question

I have this example in jsfiddle, first example work great, second example don't work regular, problem is, when i mouse hover on another div, button position apply to first div, not second.
http://jsfiddle.net/GepCL/1/
<div class="wrapper" onmouseover="document.getElementById('button').style.display = 'inline';" onmouseout="document.getElementById('button').style.display = 'none';">
<img id="imgg" src="http://cdn.sheknows.com/articles/2011/05/summer-dresses4.jpg"></img>
<div class="ribbon-wrapper-green"><div class="ribbon-green">NEW</div></div>
<div id="button" class="button" style="display: none;">Add to basket</div>
NEW
Add to basket

Answer 1

http://jsfiddle.net/GepCL/18/
'
<img id="imgg" src="http://cdn.sheknows.com/articles/2011/05/summer-dresses4.jpg"/>
<div class="ribbon-wrapper-green"><div class="ribbon-green">NEW</div></div>
<div id="button" class="button" style="display: none;">Add to basket</div>
<img id="imgg" src="http://cdn.sheknows.com/articles/2011/05/summer-dresses4.jpg"/>
<div class="ribbon-wrapper-green"><div class="ribbon-green">NEW</div></div>
<div id="button2" class="button2" style="display: none;">Add to basket</div>
'
you should put different id for button "add to basket"

Answer 2

The issue is caused by the ID you are using.
As both buttons have the same ID the JavaScript will run until it finds an ID that matches. On hovering over the second div the button will display over the first div because as soon as the JavaScript finds the ID it stops looking as ID's are supposed to be unique.

Answer 3

You could use the next script to make it more automatical and removing the IDs problem:
Javascript:
function fadeOut(div) {
// Remove your DIV with the message Add to basket
var olddiv = document.getElementById('button');
div.removeChild(olddiv);
}
function fadeIn(div) {
// Create a new DIV with your message Add to basket
var newdiv = document.createElement('div');
newdiv.setAttribute('class','button');
newdiv.setAttribute('id','button');
newdiv.innerHTML = 'Add to basket';
div.appendChild(newdiv);
}
HTML:
<div class="wrapper" onmouseover="fadeIn(this);" onmouseout="fadeOut(this);">
<img id="imgg" src="http://cdn.sheknows.com/articles/2011/05/summer-dresses4.jpg" /></img>
<div class="ribbon-wrapper-green"><div class="ribbon-green">NEW</div></div>
</div>
<div class="wrapper" onmouseover="fadeIn(this);" onmouseout="fadeOut(this);">
<img id="imgg" src="http://cdn.sheknows.com/articles/2011/05/summer-dresses4.jpg" /></img>
<div class="ribbon-wrapper-green"><div class="ribbon-green">NEW</div></div>
</div>
Example:
http://jsfiddle.net/GepCL/36/
EDIT: In the code before the button was blinking.
With the next script it is fixed. I've used Jquery to make it easier.
The issue was that adding and removing fires an onmouseout event everytime the DOm is modified.
function fadeOut(div) {
$('#button', $(div)).hide();
}
function fadeIn(div) {
if ($('#button', $(div)).html() == undefined) {
$newdiv = $('<div></div>')
.attr({ id : 'button' })
.addClass("button")
.hide();
$newdiv.text('Add to basket');
$(div).append($newdiv);
}
$('#button', $(div)).show();
}
Example: http://jsfiddle.net/GepCL/57/