HTML news feed with SQL info

Question

I am trying to do a feed in HTML like facebook or twitter that contains the content of database. I am using an generic div and using javascript to clone that generic div but I cant edit the content of each element after cloning it. Is that the best way to do a feed in HTML?

JavaScript

for(i=0 ; i < 5 ; i++){0
      var item = $("#template2 div.item").clone();
      item.getElementById("title").text("aaaa"); //4 testing
      $("#main1").append(item);
 }

HTML

<div id=template2>
  <div class="item">
    <div class="row">
      <div class="col-sm-10">
         <h3 id="title"></h3>
      </div>
    </div>
   <div class="row divider">
      <div class="col-sm-12"><hr></div>
   </div>
 </div>
</div>

Answer 1

clone() returns object that you can manipulate using jQuery.

$('#addFeed').click(function() {
  addFeed();
})

function addFeed() {
  var item = $("#template2 div.item").clone();
  $(item).find("h3").html("New Feed");
  $("#main1").append(item);
}

.feed {
  border: 1px solid black;
  width: 150px;
}

.item {
  background-color: lightgreen;
}

.item:nth-child(odd) {
  background-color: lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id=template2>
  <div class="item">
    <div class="row">
      <div class="col-sm-10">
        <h3 id="title"></h3>
      </div>
    </div>
    <div class="row divider">
      <div class="col-sm-12">
        <hr>
      </div>
    </div>
  </div>
</div>
<div id="main1" class="feed">

</div>
<button id="addFeed">Add Feed</button>