Ширина диалога при использовании в цикле

У меня проблема с контролем ширины диалога, когда я использую его в цикле (у меня есть диалог для каждой опции в цикле for).
Мой код основан на этом примере: http://api.jqueryui.com/dialog/#entry-examples , и когда я запускаю этот пример как есть, функция ширины работает отлично.
Добавление функции цикла, тогда widht не работает.

Кто-нибудь знает, что не так?

Мой код:

<?php
$cars = array("Audi", "BMW", "Mercedes");

for($n=0;$n< sizeof($cars);$n++)
{
echo '<button class = "opener" index='.$n.'>'.$cars[$n].'</button> <br>';

echo '<div id="dialog-'.$n.'" title="'.$cars[$n].'">';
echo 'hey';
echo '</div>';
}
?>

<link rel="stylesheet"href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var i;
$( "#dialog-"+i ).dialog({
autoOpen: false,
height: '400',
width: '600',
modal: true,

close: function() {
}
});

$('.opener').on("click", function(){
i = this.getAttribute("index");
$('#dialog-'+i).dialog().dialog('open');
return false;
});
} );
</script>