getElementById returning value only for first element [closed]
I have a script which is called on request on some generated elements, and selects specified element by id. The bizarre issue I'm experiencing is that the select perfectly works for the first item on the page but returns null for every other item. What could be the cause of this?
Here's the relevant Javascript:
<script type="text/javascript">
function showFrame(content, id, vid, crating)
{
var container = document.getElementById(vid+'_container');
$('#'+vid+'_embed').html(content);
$('#'+vid+'_embed iframe').attr('SCROLLING', 'YES');
var linkform = document.getElementById(vid + '_linkform');
linkform.setAttribute('action', '{{ url('/links/reportLink/') }}' + '/' + id);
$(document).on('submit', '#' + vid+ '_linkform', function() {
$.ajax({
url : $(this).attr('action'),
type : $(this).attr('method'),
data : $(this).serialize(),
beforeSend: function()
{
$('#ajax-loading').show();
},
success : function( data ) {
if (data == '{{trans("main.embeds report success")}}')
{
$('#'+vid+'_report-responses').html('<div class="alert alert-success alert-dismissable">{{ trans("main.embeds report success") }}<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button></div>')
}
else
{
console.log(data);
$('#'+vid+'_report-responses').html('<div class="alert alert-danger alert-dismissable">' + 'An error occurred while trying to report this link..' + '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button></div>')
}
},
error : function( xhr, err ) {
alert(err);
}
});
return false;
});
$('#input-'+vid).rateit('value', crating);
$('#input-'+vid).bind('rated', function(e){
var ri = $(this);
var value = ri.rateit('value');
ri.rateit('readonly', true);
$.ajax({
url : '{{ url('/links/rateLink/') }}',
type : 'GET',
data : {id: id, value: value},
beforeSend: function()
{
$('#ajax-loading').show();
},
success : function( data ) {
console.log(data);
},
error : function( xhr, err ) {
alert(err);
ri.rateit('readonly', false);
}
});
});
container.style.display = 'block';
return false;
}
</script>
And here part of the html
<div id="93_container" style="display:none">
<div class="embed-container" id="93_embed">
</div>
<div class="rateit" style="margin: 12px 0px;" id="input-93" data-rateit-min="0" data-rateit-max="10" data-rateit-step="0.5" data-rateit-value="1">
Rate Link
</div>
<a style="float: right; color: white;" href="javascript:void(0);" onclick="toggleDiv('93');" title="Hide View" class="btn btn-default no-bord-left"><i class="fa fa-minus-square"></i> Hide View</a>
<form method="POST" action="http://varmium.com/links/reportLink/%7Bid%7D" accept-charset="UTF-8" id="93_linkform" style="color: white; margin: 2px; float: right">
<input name="_token" type="hidden" value="cQQjBjZpmhefNxqWgeL7z5w4L9IMAUExSIMxX99P">
<a href="http://varmium.com/login" title="Bad Link" class="btn btn-default no-bord-left"><i class="fa fa-trash-o"></i> Bad Link</a>
</div>
<div class="row responses" id="93_report-responses" style="clear: both;">
</div>
<p>
</p>
<span class="row grey-out">
Release Date: 2014-04-06
</span>
</div>
</div>
<hr>
<div class="media col-sm-12">
<div class="pull-left col-sm-3">
<img src="http://image.tmdb.org/t/p/w300/oGkDVdlPewF60qwKfWfyhWTXL5f.jpg" alt="Poster of The Lion and the Rose" class="media-object img-responsive thumb">
</div>
<div class="media-body col-sm-9">
<style>
.embed-container { position: relative; clear:both; padding-bottom: 56.25%; padding-top: 30px; height: 100%; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class="links-section">
<h3>
View
</h3>
<dt style="float: left;">
Link:
</dt>
<dd style="color: black;">
<a href="javascript:void(0)" onclick="showFrame('\x3Ciframe\x20width\x3D\x22640\x22\x20height\x3D\x22360\x22\x20frameborder\x3D\x220\x22\x20scrolling\x3D\x22NO\x22\x20marginheight\x3D\x220\x22\x20marginwidth\x3D\x220\x22\x20src\x3D\x22http\x3A\x2F\x2Fvodlocker\x2Ecom\x2Fembed\x2Dwqploakgu4sj\x2D640x360\x2Ehtml\x22\x3E\x0D\x0A\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x3C\x2Fiframe\x3E', 255, 94,10); return false;">http://vodlocker.com</a>
<span class="quality">
<i class="fa fa-signal">
</i>
</span>
HD
<span class="language">
<i class="fa fa-flag">
</i>
</span>
<span class="rating">
<i class="fa fa-star">
</i>
</span>
10
</dd>
<dt style="float: left;">
Link:
</dt>
<dd style="color: black;">
<a href="javascript:void(0)" onclick="showFrame('\x3Ciframe\x20width\x3D\x22640\x22\x20height\x3D\x22360\x22\x20frameborder\x3D\x220\x22\x20scrolling\x3D\x22NO\x22\x20marginheight\x3D\x220\x22\x20marginwidth\x3D\x220\x22\x20src\x3D\x22http\x3A\x2F\x2Fplayed\x2Eto\x2Fembed\x2Dtkzyscs3q4dr\x2D640x360\x2Ehtml\x22\x3E\x0D\x0A\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x3C\x2Fiframe\x3E', 256, 94,10); return false;">http://played.to</a>
<span class="quality">
<i class="fa fa-signal">
</i>
</span>
HD
<span class="language">
<i class="fa fa-flag">
</i>
</span>
<span class="rating">
<i class="fa fa-star">
</i>
</span>
10
</dd>
<dt style="float: left;">
Link:
</dt>
<dd style="color: black;">
<a href="javascript:void(0)" onclick="showFrame('\x3Ciframe\x20width\x3D\x22910\x22\x20height\x3D\x22425\x22\x20frameborder\x3D\x220\x22\x20scrolling\x3D\x22NO\x22\x20marginheight\x3D\x220\x22\x20marginwidth\x3D\x220\x22\x20src\x3D\x22http\x3A\x2F\x2Fthefile\x2Eme\x2Fembed\x2D1ojtp8mmg9y3\x2D910x405\x2Ehtml\x22\x3E\x0D\x0A\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x3C\x2Fiframe\x3E', 257, 94,10); return false;">http://thefile.me</a>
<span class="quality">
<i class="fa fa-signal">
</i>
</span>
HD
<span class="language">
<i class="fa fa-flag">
</i>
</span>
<span class="rating">
<i class="fa fa-star">
</i>
</span>
10
</dd>
</div>
<div id="94_container" style="display:none">
<div class="embed-container" id="94_embed">
</div>
<div class="rateit" style="margin: 12px 0px;" id="input-94" data-rateit-min="0" data-rateit-max="10" data-rateit-step="0.5" data-rateit-value="1">
Rate Link
</div>
<a style="float: right; color: white;" href="javascript:void(0);" onclick="toggleDiv('94');" title="Hide View" class="btn btn-default no-bord-left"><i class="fa fa-minus-square"></i> Hide View</a>
<form method="POST" action="http://varmium.com/links/reportLink/%7Bid%7D" accept-charset="UTF-8" id="94_linkform" style="color: white; margin: 2px; float: right">
<input name="_token" type="hidden" value="cQQjBjZpmhefNxqWgeL7z5w4L9IMAUExSIMxX99P">
<a href="http://varmium.com/login" title="Bad Link" class="btn btn-default no-bord-left"><i class="fa fa-trash-o"></i> Bad Link</a>
</div>
<div class="row responses" id="94_report-responses" style="clear: both;">
</div>
<p>
</p>
<span class="row grey-out">
Release Date: 2014-04-13
</span>
</div>
</div>
<hr>
<div class="media col-sm-12">
<div class="pull-left col-sm-3">
<img src="http://image.tmdb.org/t/p/w300/2FHwJZA82xHGMZE15Uq7IvW9grJ.jpg" alt="Poster of Breaker of Chains" class="media-object img-responsive thumb">
</div>
Your HTML is invalid (no closing form tags). When is doubt paste your HTML into JSFiddle and look for any red-highlighted elements.
As the ID'ed elements are forms it is having problems with the page.
If you close the first form element the second one is found fine.