dynamically changing a div ID and other element's ID within the div

Question

this is the div im trying to copy

{%for i in current_user.posts%}
<div class = "own_posts" id = "{{'id_' + i.id|string}}">
    <img src = "{{url_for('static',filename='user_prof_pic/' + current_user.prof_pic)}}">
        <a href = "{{url_for('main.ProfilePage',user = current_user.first_name)}}">{{current_user.first_name}}</a>
    <p>{{i.post}}</p>
    <div class ="like_comment">
        <ul>
            <li><a href="#">like</a></li>
            <li><a href="#">comment</a></li>
        </ul>
    </div>
    <form class ="comment_form">
        <input type="text" action = "#" name = "comment_box" class ="comment_box" id = "{{'id_' +i.id|string}}">
        <input type="submit" value="comment" class ="submit" id = "{{'id_' + i.id|string}}">
    </form>
</div>
{%endfor%}

so far I've been successful at prepending it and changing the newly prepended div's ID using jquery like this.

var count = 4

    $(".submit").click(function(event){
        event.preventDefault()

        var id = $(this).attr("id")
        var comment = $(".comment_box#" + id).val()
        console.log(count)
        count++
        $.ajax({
            type:"POST",
            url:"#",//"{{url_for('main.ProfilePage',user = current_user.first_name)}}",
            data: JSON.stringify({"comments":comment}),
            contentType:"application/json;charset=UTF-8"
        });

        var div_copy = $(".own_posts#id_2").clone()

        var div_copy2 = div_copy.attr("id","id_" + count)
        $("#own_stream").prepend(div_copy2)



    });

however the form ID within the prepended div still contains the ID of the div it was cloned from. to clarify var div_copy = $(".own_posts#id_2").clone() the form in this div contains an id of id_2 so the newly prepended div's form id is still id_2

I changed the prepended div's ID doing this:

var div_copy = $(".own_posts#id_2").clone()
var div_copy2 = div_copy.attr("id","id_" + count)
$("#own_stream").prepend(div_copy2)

but I don't know how to access the form within this newly cloned div and change it's form ID .

how do we achieve this?

also am I doing this right? Im trying to learn web development and wan't to understand how sites like facebook,twitter etc. are showing your newly posted statuses/tweets into the page without refreshing it.

is what I'm doing the gist of how that works? if not shed some light on a newbie

also this is just a test to practice the concepts

Answer 1

If all you are attempting to do is retrieve the form element using jQuery, based on your source, you have multiple options.

var form = $(".own_posts#id_2 > form");
/* or */
var form = $(".own_posts#id_2 > .comment_form");

I don't normally suggest the direct descendant method because if your genealogy changes in the future, it will fail. You are using templates so intuitively I see future changes to it a possibility. Using a unique identifier or known singular class and searching the entire div chain makes more sense to me.

var form = $(".own_posts#id_2 .comment_form");
/* or */
var form = $(".own_posts#id_2").find(".comment_form");

Those two options should be roughly equivalent for your purpose and can use either.

Also I would be careful with non-unique ids. You may get away with it by only searching smaller scoping chains, but you're only supposed to have one on the page. This is why most functions that retrieve by id will return only the first object found, rather than a collection.

I don't know how you're using the ids, but perhaps something like id="{{'posts_' + i.id|string}}" and so on to utilize unique prefixes.