JSFiddle - React, Tailwind, and code Playground
HTML
<div id="item0" class="item"></div>
<a id="link0" href="">Link 1</a>
<div id="item1" class="item"></div>
<a id="link1" href="">Link 2</a>
<div id="item2" class="item"></div>
<a id="link2" href="">Link 3</a>
CSS
.item {
height:50px;
width: 200px;
margin: 20px;
background-color: blue;
color: white;
line-height: 50px;
padding: 5px;
}
JavaScript
$(document).ready(function(){
var data = [
{ text: 'binding' },
{ text: 'to' },
{ text: 'a div'}
];
var bindData = function(list) {
list.forEach(function(item, index){
$("#item" + index).html(item.text);
$("#link" + index).attr('href',"http://stackoverflow.com/questions/39509951/is-there-a-better-way-to-bind-data-to-the-divs");
});
};
bindData(data);
});