Width of dialog when used in a loop

Width of dialog when used in a loop

Hi

I have a problem controlling the width of a dialog, when I use it in a loop (I have a dialog for each option in a for loop).
My code is based on this example:  http://api.jqueryui.com/dialog/#entry-examples , and when I run this example as it is, the width function is working perfectly.
Adding the loop function, then the widht does not work.

Anyone who knows what is wrong?

My code:

  1. <?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>';
        }
    ?>
  2. <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>