We Keep Coding

Repeated elements' onclick event only works for first row

Below you will find my code I am using to pull the data from the table along with the image I want to repeat with each table row listed in the last button tag Class=plusbtn
{
$event .= ' <div style="border-bottom:1px solid gray;padding:2px;width:100%;float:left;"><div id="eventslist" onclick="goevent('.$row['id'].');">
<div style="width:100%;float:left;">
<h4 style="margin:0;"><span id="eventuser" style="width:50%;float:left;text-align:left;font-size:14px;"><img src="https:///login/profile/'.$row['profile_img1'].'" style="width:35px;height:37px;border-radius:20px;margin-left:-4%;background:url(http:///img/person-placeholder.jpg) no-repeat center" class="img-rounded"> <b>'.$row['user'].'</b></span><span style="float:right;text-align:right;font-size:12px;margin-top:9px;margin-right:-25px;">Posted: '.$row['stdate'].' </span><br/><br/><b><span style="font-size:20px;float:left;">'.$row['fname'].' </span></b></h4>
</div>
<div style="width:109%;float:left;">
<img src="http:///login/image/'.$row['name'].'" style="width:100%;height:35%;border-radius:10px;margin-left:-4%;background:url(https:///img/load.gif) no-repeat white" class="img-rounded">
</div>
<div style="width:100%;float:left;">
<p style="margin-bottom:0;">'.substr($row['description'],0,110).'...</p>
</div>
</div><div><button class="plusbtn" onclick="plusrate(\''.$likecount.'\');"><a onclick="document.getElementById(`myImage`).src=`https:///img/fav4.png`"><img id="myImage" src="https:///img/fav3.png" style="opacity: 0.7;height:25px;max-width:100px"></a></button><span id="likeqnty" class="likeqnty">0</span> <b>Likes</b></div></div> ';
}
using this set up the button image appears for every entry but I can only click the button at the first entry on my page. When I type echo around the button (echo"button") appears on the page
How can I make the button repeat with every table entry and work correctly switching from fav4 to fav3.

You problem stands in the fact that IDs should be unique. But all your images have the same ID.
<a onclick="document.getElementById(`myImage`).src=`https:///img/fav4.png`">
<img id="myImage" src="https:///img/fav3.png" style="opacity:0.7;height:25px;max-width:100px">
</a>
Clicking on any of those links will always change the FIRST image with id myImage.
You'd like to change your onclick javascript to target the image respectively to the current click target.
<a onclick="this.getElementsByTagName(`img`)[0].src=`https:///img/fav4.png`">
<img id="myImage" src="https:///img/fav3.png" style="opacity:0.7;height:25px;max-width:100px">
</a>
In this code, we use this as it is the current DOM element that received the click. And retrieve the image inside it, and change its src value. This makes sure that the targeted image is relative to where the user clicked.

Removing an image and showing this removed image in the deleted section

I have one div "upload" where various images are displayed and each image has an remove option which if clicked on hides the image.
I need to show the particular hidden images in below deleted section.
HTML
<div id="upload">
<a href="javascript:void(0);" onclick= remove()> Remove </a>
<img src="pic1.jpg">
</div>
<div id="deleted">
</div>
JS
function remove(){
$("upload").hide();
}
If I click on remove option in div "upload" then I need to hide that image and simultaneously show that image in div "deleted".

I've done some changes your original code.
HTML
<div id="upload">
<a>Remove</a> <img src="pic1.jpg" />
<a>Remove</a> <img src="pic2.jpg" />
<!-- etc. -->
</div>
<div id="deleted"></div>
JS (with jQuery)
$(function() {
$("#upload a").click(function(e) {
$(this).next("img").appendTo($("#deleted"));
$(this).remove();
});
});
By using jQuery, you can dynamically bind the click event to every a inside #upload. Then, relatively to the clicked a, find the next img, append it to #deleted (with appendTo), and finally delete the clicked a.

Here I have a sample JSFiddle http://jsfiddle.net/x3f6L9re/ with a demonstration how the problem can be solved.
Since you're intending to use jQuery, please don't add the function call in the HTML.
This line:
<a href="javascript:void(0);" onclick= remove()> Remove </a>
is thus obsolete. I used the tag button instead of a, which fits better here.
My code would be:
HTML
<div id="upload">
<figure>
<button type="button" role="button">Remove</button>
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9e/JQuery_logo.svg/524px-JQuery_logo.svg.png" alt="Image">
</figure>
<figure>
<button type="button" role="button">Remove</button>
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d3/Crystal_source.png" alt="Image">
</figure>
<figure>
<button type="button" role="button">Remove</button>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/AngularJS_logo.svg/695px-AngularJS_logo.svg.png" alt="Image">
</figure>
</div>
<div id="deleted">
</div>
I enclosed every image in a tag figure for better demarcation.
CSS
#upload, #deleted, figure {
border: thin solid black;
}
Adding border for visualisation of the effects.
And here is the jQuery:
JavaScript
$('button').click(function () {
$('#deleted').append($(this).next());
$(this).next().hide();
$(this).hide();
$(this).parent().css('border', 'none');
});
When a button is clicked its next sibling, which is the image, is appended to the div with id="deleted". Then the next sibling of the button, the image, is hidden, together with the button itself. For cosmetical purposes the border of the parent element - figure - is removed.
You can further enhance the code.

follow the below steps
<div id="upload">
Remove
<img src="pic1.png"/>
</div>
<div id="deleted">
</div>
Javascript part
$(document).ready(function() {
$("#removebutton").click(function() {
$("#deleted").html($("#upload").find("img"));
});
});
Check this working fiddle http://jsfiddle.net/zzpgn6zr/
Let me know if it is helpful

using image alt content as lightbox image description content, change html src using js

My generated html source is as follows
<a href="/images/somePhoto.png" target="_blank">
<img src="/img/somePhoto.png" alt="Image description text" width="286" height="171" />
</a>
I want to display image alt content in image popup window as image description(lightbox).
Bellow is part of generated html on lightbox popup window
<div class="lb-details">
<span class="lb-caption" style="display: none;"></span>
<span class="lb-number" style="display: none;"></span>
</div>
How to change this line
<span class="lb-caption" style="display: none;"></span> to
<span class="lb-caption" style="display: inline;">ALT IMAGE CONTENT</span>
on dom ready using js.

On DOM ready, Use .css() for changing its display property and .text() for adding text to it.
$(document).ready(function () {
var lbcaption = $('.lb-caption');
lbcaption.css('display', 'inline');
lbcaption.text($('img').attr('alt'));
//Works for the code posted in the question,
//but the selector for the image needs to be a class or an id.
});

Get src of image in button

I have a button with an image on it. How can I get the src of that image on the button in JavaScript?
This is the HTML:
<button id="A8" name="B_Rook" type="button" style="background-color:#FFE4C4" onClick="check(this.id)">
<img id="B_Rook" src="B_Rook.jpg" HEIGHT=80 width=80/>
</button>

I am really not sure what you are trying to do but...
To get the src of the image in the button tag do this
<button id="A8" name="B_Rook" type="button" style="background-color:#FFE4C4">
<img id="B_Rook" src="B_Rook.jpg" HEIGHT=80 width=80 onclick="getImgId(this.src)">
</button>
to get an id of that img element do this
<button id="A8" name="B_Rook" type="button" style="background-color:#FFE4C4">
<img id="B_Rook" src="B_Rook.jpg" HEIGHT=80 width=80 onclick="getImgId(this.id)">
</button>
and a basic click handler will look like this for both
<script>
function getImgId(id){
alert(id)
}
</script>

You're really close, just move the onclick from the a element to the img element.
You probably want to remove the a element entirely, as it's invalid HTML (button elements can't contain any interactive content elements).
Also, unless you're writing XHTML (and you almost certanly aren't), there shouldn't be a / before the > at the end of your img tag. (It's harmless and allowed, it's just pointless.)

javascript select parent element's child

For example I want to do something like this:
<td class="repeats">
<img src="a.png"/>
<span onmouseover="this.parentNode.info.src='images/b.png'"
onmouseout ="this.parentNode.info.src='images/a.png'">
text here
</span>
</td>
Without using an ID or JQuery (ideally) I need a way of selecting the image in the current cell. How can this be achieved?
I only want to change the current cell, as opposed to all cells with the same class.

Use previousSibling:
<td class="repeats">
<img src="a.png"/>
<span onmouseover="this.previousSibling.src='images/b.png'"
onmouseout ="this.previousSibling.src='images/a.png'">
text here
</span>
</td>
Docs: https://developer.mozilla.org/en-US/docs/DOM/Node.previousSibling
Or you can use parentNode.childNodes[0]:
<span onmouseover="this.parentNode.childNodes[0].src='images/b.png'"
onmouseout ="this.parentNode.childNodes[0].src='images/a.png'">
text here
</span>

you can try this
$('td[class="repeats"]').children().filter('Img').dosomething();