title: Order output value using dynamic input JQuery
body: <p>I have a dynamic input field that will show the inputted text to preview element, but when I input in a random order, the preview text order is also random.</p>
  <p>For example I have 3 input field, the order of filling starts from the 1st field, the 3rd field then the 2nd field. But the results in the preview are the 1st, 3rd and then 2nd field.</p>
  <pre>
  [test 1][test 2][test 3]
  test 1 test 3 test 2
  </pre>
  <p>What I want is even though the order of filling is random but the results in the preview still match the order of the fields.</p>
  <pre>
  [test 1][test 2][test 3]
  test 1 test 2 test 3
  </pre>
  <p>This is the HTML file</p>
  <pre><code>        &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col-6&quot;&gt;
          &lt;div class=&quot;form-group row description-form-group&quot;&gt;
            &lt;label class=&quot;col-sm-3 col-form-label&quot;&gt;Description&lt;/label&gt;
            &lt;div class=&quot;col-sm-9&quot;&gt;
              &lt;div class=&quot;input-group mb-2&quot;&gt;
                &lt;textarea class=&quot;form-control description&quot; data-row=&quot;1&quot;&gt;&lt;/textarea&gt;
                &lt;span class=&quot;badge badge-primary&quot;&gt;90&lt;/span&gt;
              &lt;/div&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn btn-primary btn-sm btn-block mt-2 add-description&quot;&gt;Add More Description +&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col-6&quot;&gt;
          &lt;div class=&quot;description&quot;&gt;
            &lt;span class=&quot;description-1&quot;&gt;Lorem ipsum dolor sit amet&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>And this is the JQuery</p>
  <pre><code>var row = 1;  
  $('.add-description').on('click', function() {
      $('&lt;div class=&quot;input-group mb-2&quot;&gt;' +
        '&lt;textarea class=&quot;form-control description&quot; data-row=&quot;' + (row + 1) + '&quot;&gt;&lt;/textarea&gt;' +
        '&lt;span class=&quot;badge badge-primary&quot;&gt;90&lt;/span&gt;' +
        '&lt;/div&gt;').insertBefore(this);
      row++;
    })
  
    $('.description-form-group').on('keyup', 'textarea.description', function() {
      var val = $(this).val();
      var row = $(this).attr('data-row');
      var length = val.length;
      var count = 90;
      var total_length = count - length;
  
      $(this).next().text(total_length);
      if (total_length &lt;= 0) {
        $(this).next().removeClass('badge-primary');
        $(this).next().addClass('badge-danger');
      } else {
        $(this).next().addClass('badge-primary');
        $(this).next().removeClass('badge-danger');
      }
  
      if (val &amp;&amp; row &gt; 1) {
        $('.description &gt; .description-' + row).remove();
        $('.description').append('&lt;span class=&quot;description-' + row + '&quot;&gt;' + val + '&lt;/span&gt;');
      } else {
        $('.description-' + row).text(val);
      }
    })
  </code></pre>
  <p>The fiddle is <a href="https://jsfiddle.net/madiluzi/6zbkp0wv/" rel="nofollow noreferrer">here</a></p>
  <p>Any advice would be appreciated.</p>