title: How to clear dynamically generated input fields using a button?
body: <p>In my form, there are several input fields which are generated dynamically. I am trying to add a reset button in my form which could clear the input fields. I have added a same class to all those input fields which I want to clear. The class name is "reset". On the time of loading, my form loads and stores some data in the dropdown box. This data is essential for the working of form. I am just trying to clear the data entered in input fields.</p>
  
  <p>I tried few examples available on Google to solve my problem. But unfortunately, none helped me. All I could do is that I have added a reset button in my form with id  "reset", which will be used to empty input fields. I need a function to make it work. 
  Can someone please help me....</p>
  
  <p>here is my code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let headings = []
  
  // appending the created HTML string to the DOM
  function initInputs(headingList) {
    jQuery(".fields").append(createInputsHTML(headingList))
  }
  
  // the HTMLT template that is going to be appended
  // to the DOM
  function createInputsHTML(headingList) {
    let html = ''
    headingList.forEach(heading =&gt; {
      if (heading !== 'Company') {
        html += `&lt;label for="${heading}"&gt;${heading}: &lt;/label&gt;`
        html += `&lt;input type="number" id="${heading}" class="reset"&gt;`
        html += '&lt;br&gt;'
      }
    })
  
    return html
  }
  
  // receiving data
  // this data arrives later in the app's lifecycle,
  // so it's the best to return a Promise object
  // that gets resolved (check JS Promise for more information)
  function getJSON() {
    return new Promise(resolve =&gt; {
      jQuery.get("https://cors-anywhere.herokuapp.com/www.coasilat.com/wp-content/uploads/2019/06/data-1.txt", function(data) {
        resolve(JSON.parse(data))
      });
    })
  }
  
  // processing raw JSON data
  function processRawData(data) {
    return new Promise(resolve =&gt; {
      const companyData = []
      // creating data array
      // handling multiple sheets
      Object.values(data).forEach((sheet, index) =&gt; {
        sheet.forEach((company, i) =&gt; {
          companyData.push({ ...company
          })
          // create headings only once
          if (index === 0 &amp;&amp; i === 0) {
            Object.keys(company).forEach(item =&gt; {
              headings.push(item.trim())
            })
          }
        })
      })
      resolve(companyData)
    })
  }
  
  $(async function() {
  
    let lists = [];
  
    function initAutocomplete(list) {
      const thisKey = 'Company'
      $("#company").autocomplete('option', 'source', function(request, response) {
        response(
          list.filter(item =&gt; {
            if (item[thisKey].toLowerCase().includes(request.term.toLowerCase())) {
              item.label = item[thisKey]
              return item
            }
          })
        )
      })
    }
  
    $("#company").autocomplete({
      minLength: 1,
      source: lists,
      focus: function(event, ui) {
        // the "species" is constant - it shouldn't be modified
        $("#company").val(ui.item.Company);
        return false;
      },
      select: function(event, ui) {
        // handling n number of fields / columns
        headings.forEach(heading =&gt; {
       $('#' +   heading).val(ui.item[heading])
        })
        return false;
      }
    });
  
    // starting data download, processing and usage
    getJSON()
      .then(json =&gt; {
        return processRawData(json)
      })
      .then(data =&gt; {
        // just so we see what data we are using
        
        // make the processed data accessible globally
        lists = data
        initAutocomplete(lists)
        initInputs(headings)
      })
  
  });
  
  
  
  // code to set default values if user enters zero or negative values
  
   /*    
      function calculate() { 
  setTimeout(function(){
  const defaults = {PE: 100, ROCE: 60, SG: 1, DY: 1};
   const values = {}; Object.keys(defaults).forEach(id =&gt; {
  const el = document.getElementById(id); if (el.value &lt; 0) {
   el.value = defaults[id]; 
  } 
  values[id] = el.value; 
  }); 
  */  
  
  
  //calculation for Rating value
  
  $(document).ready(function(){ 
  $("#Cal").click(function(){
  
  var peVal=0,roceVal=0,sgVal=0,dyVal=0,psVal=0,pbVal=0,npmlqVal=0,roaVal=0,deVal=0,upsVal=0,crVal=0
  ;
  
  jQuery(".fields input").each(function (){ 
  var idHeading=$(this).attr("id");  
  
  if(idHeading=="PE"){ peVal=parseInt($(this).val()); } 
  if(idHeading=="ROCE"){ roceVal=parseInt($(this).val()); } 
  if(idHeading=="SG"){ sgVal=parseInt($(this).val()); } 
  if(idHeading=="DY"){ dyVal=parseFloat($(this).val()); } 
  if(idHeading=="PS"){ psVal=parseFloat($(this).val()); }
  if(idHeading=="PB"){ pbVal=parseFloat($(this).val()); }
  if(idHeading=="NPMLQ"){ npmlqVal=parseFloat($(this).val()); }
  
  if(idHeading=="ROA"){ roaVal=parseFloat($(this).val()); }
  if(idHeading=="DE"){ deVal=parseFloat($(this).val()); }
  if(idHeading=="UPS"){ upsVal=parseFloat($(this).val()); }
  if(idHeading=="CR"){ crVal=parseFloat($(this).val()); }
  
  
  }); 
  
  var output=peVal+roceVal+sgVal+dyVal+psVal+pbVal+npmlqVal+roaVal+deVal+upsVal+crVal
  ;
  
  $("output[name='amount']").text(output);
   }); 
   });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Page Title&lt;/title&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /&gt;
      &lt;/head&gt;
      &lt;body&gt;
          
  &lt;div class="ui-widget"&gt;
    &lt;form id="frm1"&gt;
      &lt;label for="company"&gt;Drop Down box: &lt;/label&gt;
      &lt;input id="company" class="reset"&gt;&lt;br /&gt;&lt;br /&gt;
      
      &lt;div class="fields"&gt;&lt;/div&gt;
      &lt;!-- PLEASE NOTE THAT THE OTHER INPUT FIELDS WILL BE ADDED DYNAMICALLY --&gt;
   &lt;button  type="button" id="Cal" disabled="disabled"&gt;
   Button
   &lt;/button&gt;
    &lt;button type="button" id="reset" &gt;Reset&lt;/button&gt;
  &lt;p&gt; &lt;output name="amount" for="calculation"&gt;0&lt;/output&gt;
  &lt;/p&gt;
  &lt;/form&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>