"Now, if there are 100 headers, i would have to assign variables 100 times separately. so its better to make it dynamic. "

I recommend a hybrid solution that dynamically creates static Javascript:

use strict;
use warnings;
use Mojolicious::Lite;

get '/' => sub {
    my $c = shift;
    my @array = qw( foo bar baz qux );
    $c->stash( vars => \@array );
    $c->render( template => 'js', format => 'html' );
};

app->start;

__DATA__
@@ js.html.ep
<script>
<% for ( 0 .. $#$vars) { %>
var headname<%= $_ + 1 %> = "<%= $vars->[$_] %>";
<% } %>
</script>
[download]

Yields:

<script>

var headname1 = "foo";

var headname2 = "bar";

var headname3 = "baz";

var headname4 = "qux";

</script>
[download]

UPDATE: Better yet would be to shove them all into a Javascript array:

use strict;
use warnings;
use Mojolicious::Lite;

get '/' => sub {
    my $c = shift;
    my @array = map "'$_'", qw( foo bar baz qux );
    $c->stash( vars => \@array );
    {
        local $" = ', ';
        $c->render( template => 'js', format => 'html' );
    }
};

app->start;

__DATA__
@@ js.html.ep
<script>
var headname = <%== "[@$vars]" %>;
alert( headname );
</script>
[download]

L-LL-L--L-LL-L--L-LL-L--
-R--R-RR-R--R-RR-R--R-RR
B--B--B--B--B--B--B--B--
H---H---H---H---H---H---
(the triplet paradiddle with high-hat)