title: clearing input text area with dynamic input id's on button click - jQuery
body: <p>Although the question title gives an impression that I want to ask one question, but there are two problems I have facing at the moment.</p>
  
  <p>I have gone through few similar questions on how to clear the input text area on button click, but most of them are for fixed input class or id's.</p>
  
  <p>Problem 1: I am generating rows dynamically and and all the fields are being populated using JS thus the input ID's for all text boxes are different. Now if a user enter some number on "Apply to all" input field and click the button the same number should be set to all the rows which are added in the betslip.</p>
  
  <p>Problem 2: After entering individual values in the betslip input boxes and if I click "clear all" button. It should clear all the inputs entered earlier in the bet slip.</p>
  
  <p>Here is the HTML structure </p>
  
  <pre><code>&lt;div id="bets"&gt;
    &lt;div id="idNo1" class="bet gray2" name="singleBet"&gt;
      &lt;div class="left"&gt;
        &lt;p class="title"&gt;
          &lt;p class="supermid"&gt;
            &lt;input id="input_1" type="text"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="idNo2" class="bet gray2" name="singleBet"&gt;
      &lt;div class="left"&gt;
        &lt;p class="title"&gt;
          &lt;p class="supermid"&gt;
            &lt;input id="input_2" type="text"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="idNo3" class="bet gray2" name="singleBet"&gt;
      &lt;div class="left"&gt;
        &lt;p class="title"&gt;
          &lt;p class="supermid"&gt;
            &lt;input id="input_3" type="text"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS for adding element in the individual bets</p>
  
  <pre><code>function createSingleBetDiv(betInfo) {
      var id = betInfo.betType + '_' + betInfo.productId + '_' + betInfo.mpid,
          div = createDiv(id + '_div', 'singleBet', 'bet gray2'),
          a =  createA(null, null, null, 'right orange'),
          leftDiv = createDiv(null, null, 'left'),
          closeDiv = createDiv(null, null, 'icon_shut_bet'),
          singleBetNumber = ++document.getElementsByName('singleBet').length;
  
      // Info abt the bet
      $(leftDiv).append('&lt;p class="title"&gt;&lt;b&gt;&lt;span class="bet_no"&gt;' + singleBetNumber + '&lt;/span&gt;.&amp;nbsp;' + betInfo['horseName'] + '&lt;/b&gt;&lt;/p&gt;');
      var raceInfo = "";
      $("#raceInfo").contents().filter(function () {
          if (this.nodeType === 3) raceInfo = $(this).text() + ',&amp;nbsp;' + betInfo['betTypeName'] + ' (' + betInfo['value'].toFixed(2) + ')';
      });
      $(leftDiv).append('&lt;p class="title"&gt;' + raceInfo + '&lt;/p&gt;');
  
      // Closing btn
      (function(id) {
          a.onclick=function() {
              removeSingleBet(id + '_div');
          };
      })(id);
      $(a).append(closeDiv);
  
      // Creating input field - This is where I am creating the input fields
      $(leftDiv).append('&lt;p class="supermid"&gt;&lt;input id="' + id + '_input\" type="text" class="betInput"&gt;&lt;/p&gt;');
  
      // Creating WIN / PLACE checkbox selection
      $(leftDiv).append('&lt;p&gt;&lt;input id="' + id + '_checkbox\" type="checkbox"&gt;&lt;b&gt;' + winPlace + '&lt;/b&gt;&lt;/p&gt;');
  
      // Append left part
      $(div).append(leftDiv);
      // Append right part
      $(div).append(a);
      // Appending div with data
      $.data(div, 'mapForBet', betInfo);
  
      return div;
  }
  </code></pre>
  
  <p>HTML for Apply to all and Clear all button</p>
  
  <pre><code>&lt;a href="javascript: applyToAllBetInput()"class="button apply orange"&gt;APPLY TO ALL &lt;input type="text"&gt; &lt;/a&gt;
  
  &lt;a href="javascript: clearAllBetInput()" class="button clearall gray"&gt;CLEAR ALL&lt;/a&gt;
  </code></pre>
  
  <p>JS where I need to implement those 2 functions</p>
  
  <pre><code>function applyToAllBetInput() {
      $('.apply').change(function() {
          $(this).prevAll().find('input[type=text]').val($(this).val());
      });
  }
  
  function clearAllBetInput() {
      $('.clearall').click(function() {
          $('div.bet').find('input').val('');
      });
  }
  </code></pre>