Develop Reference

Making a normal "submit" button that will get me to the "div id="example"

Is it possible to make a submit button that when I click it, it will get me to the for example <div id="Home"> without Javascript? I already tried with different ways but as always the first page is showing all tags from other ID's page's. I already have the Javascript code but I don't want to use, I want to do all this by simple HTML tags, if possible please help.

Instead of
<button type="submit">Submit</button>
why not do something like
submit

Give your div an id such as
<div id="#home">
and then the link should link to the #home.
<a href="#home">
That should work
Try it here
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_a_href_anchor

Write click event dynamically on jquery

Here is the original html
<div class='cl_{{ $gen }}'>{{$gen->name}}</div>
<div class='jl_{{ $var }}'>{{$gen->name}}</div>
After looping over here is the html i got as output
I wanted to do if i click on the class cl_x, then the jl_x should be visible and other should be hidden and by default the first cl_1 should be visible. How can i do this ?
<div class='cl_1'>One</div>
<div class='cl_5'>Two</div>
<div class='cl_6'>Three</div>
<br>
<div class='jl_1'>Alpha</div>
<div class='jl_1'>Andrew</div>
<div class='jl_1'>Christ</div>
<div class='jl_5'>Anto</div>
<div class='jl_5'>Brito</div>
<div class='jl_6'>Oyster</div>
<div class='jl_6'>Beta</div>
Note : All the 1,5,6 are not standard as they are coming from database.
I really can't able to think how to achieve this. Help pls
But Here is what i have tried the logic
Inside Document Ready
Loop over the jquery like html
Write click event to show hide if they cick on cl_*
Trigger the click event for first occurance.
Don't worry about the html generated but the need is to write the jquery events dynamically or something else
But can't able to implement the code pls help
Script :
$(document).ready(function() {
//not sure whether i should loop over the jquery itself or write anything like the element starts with cl-* like that
});
Update :
Here is the Fiddle i have so far

You don't really want to use class for this - a custom data attribute makes sense, though. Like <div class="cl" data-number="{{ $gen }}"> with <div class="jl" data-number="{{$var}}"> on the other elements.
Then inside the $(document).ready(...) you can do something like:
$('.jl').hide().first().show();
$('.cl').click(function(){
$('.jl').hide().filter('[data-number="' + $(this).data('number') + '"]').show();
})
It would also be good to make up more meaningful names than "cl" and "jl" - classes should generally be semantic.

Would move the unique identifiers to a different attribute and add a common class to all the J group
<div class='cl' data-gen="{{ $gen }}">{{$gen->name}}</div>
<div class='jl jl_{{ $var }}'>{{$gen->name}}</div>
JS
$(document).on('click','.cl',function(){
$('.jl').hide().filter('.jl_' + $(this).data('gen') ).show();
})

Add a base "jl" class to all your html that has anything with a "jl_*" so that you will have access to anything overall that has the "jl" class then toggle it hidden or not hidden like so:
HTML:
<div class='cl {{ $gen }}'>{{$gen->name}}</div>
<div class='jl {{ $var }}'>{{$gen->name}}</div>
JS:
$(document).on('click', '.cl', function(e){
var classes = ($(e.target).attr("class").split(' '));
$('.jl').toggleClass("hide");
$('.jl' + "."+ classes[1]).toggleClass("hide");
});
Style:
.hide{
display: none;
}
https://jsfiddle.net/rc368gjp/

How to add content on a specific point inside a div

Say I have a div with an id (main comment) and more divs underneath with reply id's. I want to dynamically add the content of the comment to the end at the end of the replies. I can't grab the id of the last reply, but I can grab the id of the main comment (which is also the id of the commentbox which is always at the end. Something like this:
<div class="commentArea">
<div class="comment_'.id.'"> Something </div>
<div class="reply_'.replyid.'"> What kind of comment is that? </div>
<div class="reply_'.replyid.'"> What kind of reply is that? </div>
<div class="reply_'.replyid.'"> You guys are strange. </div>
<div class="replyToComment_'.id.'"> some button and stuff </div>
</div>
I want to add content inside commentArea right before replyToComment_'.id.' ...
I had an idea that probably works and looked like this (I was thinking maybe there was some easier way to do it).
<div class="commentArea">
<div class="comment_'.id.'"> Something </div>
<div class="reply_'.replyid.'"> What kind of comment is that? </div>
<div class="reply_'.replyid.'"> What kind of reply is that? </div>
<div class="reply_'.replyid.'"> You guys are strange. </div>
<div class="newReply"></div>
<div class="replyToComment_'.id.'"> some button and stuff </div>
</div>
And just add and empty div of newReply at the end of every reply posted...
Any other ideas?

.appendTo() of jQuery is what you need:
http://api.jquery.com/appendto/

Ok I thought about few ways to achieve this goal... "If i understand correctly what you were trying to ask"
By this way you do not need even to use ID as a class.... unless there is a specific reason to this?!?!
If not then move the id to id attribute and give it something like this
id="2,56"
2 = the question || post id
56 = the answer id
by this way you will have more control on your posts and comments
1. if reply_ is an individual class
$('.reply_')[$('.reply_').length - 1].after(comment);
2. if replyToComment_ is an individual class
$('.replyToComment_').before(comment);

I am not sure, I understood your question correctly, but I think .prepend() would help you.
You will need to wrap your last div i.e. <div class="replyToComment_'.id.'"> some button and stuff </div> with some other div and do .prepend() on that parent everytime. Like this:
<div class='parentContainer'>
<div class="replyToComment_'.id.'"> some button and stuff </div>
</div>
And do $(".parentContainer'").prepend(newComment) to add comment everytime.

This is how I would do it:
$("#addtxt").click(function () {
$("[class^='replyToComment']").before("<div class='newReply'>" + $("#text").val() + "</div>");
});
Here is the JSFiddle demo

AngularJS / CSS-Selectors - Form Validation

Simple question:
Why is it that the summary class can directly be appended to the <span> element but not the ng-classes to the <form> tag?
Is it because the ng-classes are later generated during runtime? What are the guidelines?
CSS:
HTML:

That is not how you use ng-class. Instead do this:
<span class="summary" ng-class="{ 'ng-valid': myForm.$valid, 'ng-invalid': !myForm.$valid }">...</span>
If you want to do it the way you have it do it like this:
<span class="summary {{ myForm.$valid ? 'ng-valid' : 'ng-invalid' }}">...</span>
Next time you need help on stackoverflow, please paste the code instead of images. Would make it a lot easier.

Changing anchor tag text while using PhoneGap and jQuery

As a preface, I am using PhoneGap. When I click on a Category Title, I have taken that title and set it in sessionStorage. Now, I want to set the "back" button of a new PhoneGap page (which displays some information contained in that category) to that Category Title. The HTML code is shown below. To be specific, I want to change the text of the "a" element within the "header" element.
I guess a part of my question is, does the fact that I am using PhoneGap change how I can access the anchor tag? I've been trying to set the back button text right after the Category has been selected/clicked on. I have tried multiple things like:
$("adviceBodyNavbarHeader a").text(sessionStorage.getItem("catTitle"));
but I can't quite get it working, and it is getting quite frustrating =/
<div data-role="view" id="adviceBody" data-title="Advice Body" data-show="GetAdviceBody" data-transition="slide">
<header data-role="header" id="adviceBodyNavbarHeader">
<div class="navHeader">
<a class="nav-button" data-view="adviceTitles" data-align="left">Back</a>
<span id="adviceTitle" class="navTitle"></span>
</div>
</header>
<ul id="advice-body" data-role="listview">
</ul>
</div>

Your selector is wrong. You try to select a html element called adviceBodyNavbarHeader.
What you want to do is this: $('#adviceBodyNavbarHeader').text(sessionStorage.getItem("catTitle"));
Hope it helps.
Edited my post due to late brain inactivity.