Create button in declared variable using javascript
<p>I have a set of images for faded out and faded in i.e when an image is selected others become faded. It is working. Whenever an image is selected some information about that picture is shown beside list of images. It is also working. But at present I need a button in that text which will be different for every picture. Can any one guide me how to do this? 
For text, in script there is a variable which contains text as array, like-</p>

<pre><code>var line = [{
    "caption": "Violet",
    "content": "It is 1st color of VIBGYOR.",
}, {
    "caption": "Blue",
    "content": "It is third color of VIBGYOR."
}, {
    "caption": "Orange",
    "content": "It is sixth color of VIBGYOR."
}]
</code></pre>

<p>And the function is:</p>

<pre><code>function motionStart(e, data) {
    $(".title, .text", this).hide().removeClass('animated fadeInDown fadeInUp');
}

function motionEnd(e, data) {

    var text = line[data.index % line.length];
    $(".title, .text", this).show();

    $(".title", this).text(text.caption).addClass('animated fadeInDown');
    $(".text", this).text(text.content).addClass('animated fadeInUp');
}

function carouselCreated(e, data) {
    motionEnd.call(this, e, data)
}
</code></pre>

<p>I want to insert <code>document.write('&lt;button type="button"&gt;Click Me!&lt;/button&gt;')</code> for each. after clicking button it will show another page.
Please help if possible.</p>