How to trigger an event in example below
<p>I have a line of code below which successfully does a trigger when a grid button is clicked. This is belw:</p>

<pre><code>$('#btn'+gridValues).trigger('click');
</code></pre>

<p>The trigger works with this code below:</p>

<pre><code>     &lt;table id="optionAndAnswer" class="optionAndAnswer"&gt;
    &lt;tr&gt;
          &lt;th colspan="2"&gt;
            Option and Answer
        &lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr class="option"&gt;
    &lt;td&gt;1. Option Type:&lt;/td&gt;
    &lt;td&gt;
    &lt;div class="box"&gt;
        &lt;input type="text" name="gridValues" class="gridTxt maxRow" id="mainGridTxt" readonly="readonly" /&gt;
        &lt;span href="#" class="showGrid" id="showGridId"&gt;[Open Grid]&lt;/span&gt;
    &lt;/div&gt;

    &lt;?php
        $num = range("3","26");
    ?&gt;

          &lt;table class="optionTypeTbl"&gt;
            &lt;tr&gt;

                &lt;?php
                $i = 1;
                foreach($num as $key =&gt; $val){
   if($i%7 == 1) echo"&lt;tr&gt;&lt;td&gt;";
   echo"&lt;input type=\"button\" value=\"$val\" id=\"btn".$val."\" name=\"btn".$val."Name\" class=\"gridBtns gridBtnsOff\"&gt;";        
                    if($i%7 == 0) echo"&lt;/td&gt;&lt;/tr&gt;";
                    $i++;
                }
                ?&gt;

                    &lt;/tr&gt; 
                    &lt;/table&gt;
    &lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table&gt;
</code></pre>

<p>What the trigger code does is lets say the user clicks on the grid button (btn) 4, then it will display 4 answer buttons A,B,C,D. Another example is if the user clicks on grid button 7, it will display 7 answer buttons A,B,C,D,E,F,G.</p>

<p>But I have another piece of code below where it is like a template or a copy of the option control you see in the above code.</p>

<pre><code>    function insertQuestion(form) {    

        var context = $('#optionAndAnswer');

            var $tbody = $('#qandatbl &gt; tbody'); 
            var $tr = $("&lt;tr class='optionAndAnswer' align='center'&gt;");
            var $options = $("&lt;div class='option'&gt;Option Type:&lt;br/&gt;&lt;/div&gt;");
            var $questionType = '';


            $('.gridTxt', context).each( function() {

            var $this = $(this);
            var $optionsText = $("&lt;input type='text' class='gridTxtRow maxRow' readonly='readonly' /&gt;")
            .attr('name',$this.attr('name')+"[]")
            .attr('value',$this.val())
            .appendTo( $options )
            .after("&lt;span href='#' class='showGrid'&gt;[Open Grid]&lt;/span&gt;");

            $questionType = $this.val();

            });


            $td.append($options);
            $tbody.append($tr); 

        }
</code></pre>

<p>My question is that if in the first code the trigger is <code>$('#btn'+gridValues).trigger('click');</code>, then what should the trigger code be for the second code to be able to select the grid button from the second code?</p>

<p>UPDATE:</p>

<p>I have created a url for this application <a href="http://helios.hud.ac.uk/u0867587/Mobile_app/Text16.php" rel="nofollow">here</a>. Please follow the steps to use the application and then you can see what is happening:</p>

<ul>
<li>Step 1: When you open applicaton, you see a green plus button on the
page, click on it and it will display a modal window.</li>
<li>Step 2: In modal window there is a search bar, type in "AAA" and
submit search, you will see a bunch of rows appear.</li>
<li>Step 3: In the first row, you see under "Option Type" A-D, click on
the "Add" button within this row, the modal window will close and you
see in the grey textbox on right hand side that "Option Type" textbox
equals 4 and it displays the Answer buttons A,B,C and D, this is
because as you remember the option tpye for that row was "A-D".</li>
</ul>

<p>Now this works fine but it only works for the top option and answer control, follow the steps below:</p>

<ul>
<li>Step 4: Click on the "Add Question" button, it adds a row underneath
containing the details from the option and answer control on top.</li>
<li>Step 5: Within the row you have just added, you see a geen plus
button on left hand side, click on this button and perform the same
search "AAA" in search box.</li>
<li>Step 6: This time select the last row by clicking on its "Add"
button, the "Option Type" for this row is "A-G" so it should display
"Answer" buttons A,B,C,D,E,F and G, but it doesn't do this, it still
states "A,B,C,D". This is why I want to know what the trigger click
function is for when the user adds an option type within one of the
added rows, so it changes the answer buttons to match the option
type.</li>
</ul>
