Collect info about selected elements to an array of objects
<p>I have this kind of markup:  </p>

<pre><code>&lt;span class="makearray"&gt;click me&lt;/span&gt;
&lt;div id="container"&gt;
    &lt;ul&gt;
        &lt;li class="noindex"&gt;&lt;span class="txt"&gt;blahblah&lt;/span&gt;&lt;/li&gt;
        &lt;li class="noindex"&gt;&lt;span class="txt"&gt;blahblah&lt;/span&gt;&lt;/li&gt;
        &lt;li class="index"&gt;&lt;span class="txt"&gt;text1&lt;/span&gt;
            &lt;ul&gt;
                &lt;li class="index"&gt;&lt;span class="txt"&gt;text2&lt;/span&gt;
                    &lt;ul&gt;
                        &lt;li class="noindex"&gt;&lt;span class="txt"&gt;blahblah&lt;/span&gt;&lt;/li&gt;
                        &lt;li class="index"&gt;&lt;span class="txt"&gt;text3&lt;/span&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>When I click <code>.makearray</code> element, I want to collect info about all my <code>.txt</code> elements that are <strong>first-children</strong> of <code>.index</code> list-items (maybe using Jquery <code>.index()</code> method?) and make this array:  </p>

<pre><code>var info = [{
    "index": "1",
    "txtcontent": "text1"
}, {
    "index": "2",
    "txtcontent": "text2"
}, {
    "index": "3",
    "txtcontent": "text3"
}]
</code></pre>

<p>where <code>index</code> property is an integer indicating the position of <code>.index &gt; .txt:first-child</code> element within <code>.container</code> element, and <code>txtcontent</code> is the result of Jquery <code>text()</code> method applied to this element.<br>
Note: <code>txt</code> elements may have <code>contenteditable</code> attribute, I even may insert new <code>li.index</code> elements into <code>ul</code> dynamically, so every time I click <code>.makearray</code>, the existing array must be replaced by the new one (that is, rebuilt from scratch).  </p>

<p>Please, help, thank you</p>
