models created dynamically through php with different id's not working but working fine if i write the id as 'mymodel' instead of 'mymodel[$id]'

Question

The model is having a unique id for every while loop call as the id's are generated randomly. For each call of while loop the button is having a unique id and is calling a unique model. But the model is not showing by clicking on the button. The model shows up if i exclude giving unique id to each model and button and give them a common id but in this case it is opening the same model for every button click.

"<div class='modal fade' id='myModal[$id]' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
        <div class='modal-dialog'>
            <div class='modal-content'>
                <div class='modal-header'>
                    <button type='button' class='close' data-dismiss='modal' aria-hidden='true'></button>
                    <h4 class='modal-title' id='myModalLabel'>More About $name</h4>
                    </div>
                <div class='modal-body'>
                    <center>
                    <img src='img.jpg' name='dogimage' width='140' height='140' border='0' class='img-circle'>
                    <h3 class='media-heading'>$name</h3>
                    <hr>
                    <center>
                    <p class='text-left'><strong>Age(in months): </strong> $age
                        </p>
                        <p class='text-left'><strong>Weight(in kg): </strong>
                        $weight.</p>
                        <p class='text-left'><strong>Breed: </strong>
                      $breed.</p>
                        <p class='text-left'><strong>Gender: </strong>
                        $gender.</p>
                    </center>
                </div>
                <div class='modal-footer'>
                    <center>
                    <button type='button' class='btn btn-default' data-dismiss='modal'>Know enough about $name</button>
                    </center>
                </div>
            </div>
        </div>
    </div>     
                <div class='container'>
    <div class='row'>
        <div class='col-md-offset-2 col-md-8 col-lg-offset-3 col-lg-6'>
         <div class='well profile'>
            <div class='col-xs-12'>
                <div class='col-xs-12 col-sm-8'>
                    <div id='dogrequestmessage'></div>
                    <h2>$name</h2>
                    <p><strong>Breed: </strong> $breed </p>
                    <p><strong>Weight(in kg): </strong> $weight </p>
                    <p><strong>Gender: </strong> $gender </p>
                    <p><strong>Age:(in months): </strong> $age </p>
                </div>             
            </div>            
            <div class='col-xs-12 divider text-center'>
                <div class='col-xs-12 col-sm-4 emphasis'>
                    <button class='btn btn-info btn-block' href='#aboutModal' data-toggle='modal' data-target='#myModal[$id]' name = 'viewprofile[$id]' id= 'view_profile'><span class='fa fa-user'></span> View Profile </button>
                </div>
            </div>
         </div>                 
        </div>
    </div>
</div>"

Answer 1

"<div class='modal fade' id='myModal[$id]'

The problem is with the square brackets used in the ID value. Those would need to be escaped, to create a valid CSS selector, but the library used for the functionality probably doesn't do that.

Use an ID format like modal_$id instead. Assuming the $id values are numeric, that will give you IDs that can be used inside a CSS selector without any additional escaping.