I am creating one progress bar with jQuery but problem is this that i am connecting JQuery with id of component but as soon as i create new component with same id ,It does not work.What is the way to solve it?
I am attaching my HTML code & CSS. All other files are common jQUERY Library.
<body>
<script >
$(function(){
$("#status").animate( { width: "80%" }, 2000);
});
</script>
<div id="progress-bar">
<div id="status" ></div>
</div>
<div id="progress-bar">
<div id="status" ></div>
</div>
CSS File
#progress-bar {
border: 2px outset #FFFFFF;
background: #E1C555;
width: 500px;
height: 30px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
#status {
background: #EC1414;
width: 10%;
height: 30px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
It is not allowed to use the same ID twice.
You must use unique IDs or classes instead.