title: How do I structure my code correctly and still be able to use my $(this) var's?
body: <p>Having problem with upload script when using it multiple times it POST more than one at a time.</p>
  <p>I figured out I'ts becouse I have nestled events, now if I dont do this I cant use VAR's that is set from the first click event.</p>
  <p>How do I structure the code in such way that I dont get duplicate events and still can use my VAR's?</p>
  <p>JS:</p>
  <pre><code>    $(document).ready(function(){
  
    $('.editRow').on(&quot;click&quot;, function(){
  
      $(&quot;#editDoc&quot;).slideToggle(500);
      var popup = $(&quot;#editDoc&quot;);
      var editparent = $(this).closest(&quot;.avdExpand&quot;);
      var row = $(this).closest(&quot;.admDoc&quot;);
      var rowID = $(row).attr(&quot;data-row&quot;);
      var link = $(row).attr(&quot;data-link&quot;);
      var rev = $(row).attr(&quot;data-rev&quot;);
      var revNext = parseInt(rev) + 1;
      var editLink = $(row).attr(&quot;data-edit-link&quot;);
      var dokTypDiv = $(row).find(&quot;.dokTyp&quot;);
      var dokTyp = $(dokTypDiv).text();
      var dokNamnDiv = $(row).find(&quot;.dokNamn&quot;);
      var dokNamn = $(dokNamnDiv).text();
      var dokNrDiv = $(row).find(&quot;.dok_nr&quot;);
      var dokNr = $(dokNrDiv).text();
      
  
      console.log(dokTyp);
      console.log(popup);
  
      var fileNote = $(popup).find(&quot;.note:first&quot;);
      var newFileNote = &quot;&quot;+dokNr+&quot; &quot;+dokTyp+&quot; &quot;+dokNamn+&quot;&quot;;
      $(fileNote).html(newFileNote);
      $(popup).find(&quot;a&quot;).attr(&quot;href&quot;, editLink);
      $(popup).find(&quot;.center&quot;).html(&quot;&lt;div&gt;Rev &quot;+rev+&quot; &lt;/div&gt;&lt;div&gt;&lt;i class='fas fa-long-arrow-alt-right'&gt;&lt;/i&gt;&lt;/div&gt;&lt;div&gt; Rev &quot;+revNext+&quot;&lt;/div&gt;&quot;);
  
      var AppendButton = $(popup).find(&quot;.editFormButton&quot;);
      var appendForm = $(popup).find(&quot;#editForm&quot;);
      var inputFilNamn = '&lt;div class=&quot;inputRow&quot;&gt;&lt;input class=&quot;appendInput&quot; type=&quot;text&quot; name=&quot;namn&quot; value=&quot;'+dokNamn+'&quot;&gt;&lt;/div&gt;';
      var inputDok1 = '&lt;div class=&quot;boxes&quot;&gt;&lt;div class=&quot;box&quot;&gt;&lt;input type=&quot;file&quot; name=&quot;file-1&quot; id=&quot;file-1&quot; class=&quot;inputfile inputfile-1 addRollWord&quot; data-multiple-caption=&quot;{count} files selected&quot; multiple /&gt;&lt;label for=&quot;file-1&quot;&gt;&lt;i class=&quot;far fa-file-word&quot; width=&quot;100%&quot; height=&quot;17&quot; viewBox=&quot;0 0 20 17&quot;&gt;&lt;/i&gt; &lt;span&gt;Välj fil&lt;/span&gt;&lt;/label&gt;&lt;/div&gt;&lt;/div&gt;';
      var inputDok2 = '&lt;div class=&quot;boxes&quot;&gt;&lt;div class=&quot;box&quot;&gt;&lt;input type=&quot;file&quot; name=&quot;file-2&quot; id=&quot;file-2&quot; class=&quot;inputfile inputfile-2 addRollPDF&quot; data-multiple-caption=&quot;{count} files selected&quot; multiple /&gt;&lt;label for=&quot;file-2&quot;&gt;&lt;i class=&quot;far fa-file-pdf&quot; width=&quot;100%&quot; height=&quot;17&quot; viewBox=&quot;0 0 20 17&quot;&gt;&lt;/i&gt; &lt;span&gt;Välj fil&amp;hellip;&lt;/span&gt;&lt;/label&gt;&lt;/div&gt;&lt;/div&gt;';
      console.log(appendForm);
      $(appendForm).append(inputFilNamn);
  
      var oneFile = [&quot;Mall&quot;, &quot;Checklista&quot;, &quot;Övrigt&quot;];
      
      if( $.inArray(dokTyp, oneFile) != -1){
        $(appendForm).append(inputDok1);
      } else {
        $(appendForm).append(inputDok1);
        $(appendForm).append(inputDok2);
      }
  
      $(appendForm).append('&lt;input class=&quot;appendInput&quot; type=&quot;hidden&quot; name=&quot;id&quot; value=&quot;'+rowID+'&quot;&gt;');
  
  
      ;( function( $, window, document, undefined ) {
      $( '.inputfile' ).each( function()  {
  
            var $input = $(this),
              $label = $input.next( 'label' ),
              labelVal = $label.html();
  
  
          $input.on('change', function(e) {
              var fileName = '';
              
              if( this.files &amp;&amp; this.files.length &gt; 1 )
                  fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
              else if( e.target.value )
                  fileName = e.target.value.split( '\\' ).pop();
  
              if( fileName )
              
                  $label.find( 'span' ).html( fileName );
              else
                  $label.html( labelVal );
          });
          // Firefox bug fix
          $input
          .on( 'focus', function(){ $input.addClass( 'has-focus' ); })
          .on( 'blur', function(){ $input.removeClass( 'has-focus' ); });
      });
  })( jQuery, window, document );
  
    
      $('.editForm').submit(function(e) {
      e.preventDefault();
  
      var knapp = $(this);
      var parent = $(this).closest(&quot;.admExpandAdd&quot;);
      var appenddiv = $(this).closest(&quot;.avdExpandContainer&quot;).children(&quot;.avdExpand.R&quot;);
      var dokTyp = $(parent).find(&quot;.addRollTyp&quot;).val();
      var process = $(parent).find(&quot;.addRollProcess&quot;).val();
      var avd = $(parent).find(&quot;.addRollAvd&quot;).val();
      var namn = $(parent).find(&quot;.addRollNamn&quot;).val();
     
  
        $.ajax({
          url: &quot;scripts/s_editDoc.php&quot;, // Change this to your PHP update script!
          type: 'POST',
          processData: false, // important
          contentType: false, // important
          data: new FormData(this),
          dataType: 'json',
          success: function(ret){
            $('input[type=&quot;radio&quot;]').prop('checked', false);
            var id = ret.id;
            var dokTyp = ret.dokTyp;
            var dokNamn = ret.dokNamn;
            var link = ret.link;
            var editLink = ret.editLink;
            var rev = ret.rev;
            var dokNr = ret.dokNr;
            
            $('#editForm')[0].reset();
            $(&quot;.appendInput&quot;).remove();
            $(&quot;.boxes&quot;).remove();
            $(&quot;.popupdiv&quot;).hide();
            console.log(row);
            $(row).replaceWith('&lt;div class=&quot;admDoc&quot; data-rev=&quot;'+$.trim(rev)+'&quot; data-row=&quot;'+$.trim(id)+'&quot; data-link=&quot;'+$.trim(link)+'&quot; data-edit-link=&quot;'+$.trim(editLink)+'&quot;&gt;&lt;div class=&quot;note dokTyp&quot;&gt;'+$.trim(dokTyp)+'&lt;/div&gt;&lt;a  target=&quot;blank&quot; href=&quot;'+$.trim(link)+'&quot;&gt;&lt;div class=&quot;dokNamn&quot;&gt;'+$.trim(dokNamn)+'&lt;/div&gt;&lt;/a&gt;&lt;div class=&quot;note dok_nr&quot;&gt;'+$.trim(dokNr)+'&lt;/div&gt;&lt;div class=&quot;note rev&quot;&gt;Rev '+$.trim(rev)+'&lt;/div&gt;&lt;div class=&quot;icons&quot;&gt;&lt;div&gt;&lt;i class=&quot;fas fa-link tooltip&quot;&gt;&lt;span class=&quot;tooltiptext&quot;&gt;'+$.trim(link)+'&lt;/span&gt;&lt;/i&gt;&lt;/div&gt;&lt;div class=&quot;editRow&quot;&gt;&lt;i class=&quot;far fa-edit&quot;&gt;&lt;/i&gt;&lt;/div&gt;&lt;div class=&quot;deleteRow&quot;&gt;&lt;i class=&quot;far fa-trash-alt&quot;&gt;&lt;/i&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;')
          },
          error: function(ret){
              console.log(ret.response);
          }    
        });
      });
    });
  });
  </code></pre>
  <p>HTML Popupform:</p>
  <pre><code>&lt;div class=&quot;popupdiv hidden&quot; id=&quot;editDoc&quot;&gt;
  
      &lt;div class=&quot;popupHeader&quot;&gt;
          &lt;h1&gt;Uppdatera dokument&lt;/h1&gt;
          &lt;div class=&quot;absolute-topright closeDocForm&quot;&gt;&lt;button class=&quot;closeWindow&quot;&gt;&lt;i class=&quot;far fa-window-close&quot;&gt;&lt;/i&gt;&lt;/button&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;container&quot;&gt;
  
          &lt;div class=&quot;blockheader&quot;&gt;&lt;div class=&quot;blockHeaderIcon&quot;&gt;&lt;i class=&quot;fas fa-circle&quot;&gt;&lt;/i&gt;&lt;h3 class=&quot;blockHeaderNumber&quot;&gt;1&lt;/h3&gt;&lt;/div&gt;&lt;h3 class=&quot;blockHeaderText&quot;&gt;Redigera filen&lt;/h3&gt; &lt;p class=&quot;note&quot;&gt; AM20:009 Filnamn Mall&lt;/p&gt;&lt;/div&gt;
          &lt;div class=&quot;block&quot;&gt;
              &lt;div class=&quot;blockrow geteditfile&quot;&gt;&lt;div&gt;Ladda ned filen för redigering&lt;/div&gt;&lt;a href=&quot;&quot;&gt;&lt;div class=&quot;getEditFile&quot;&gt;&lt;i class=&quot;fas fa-arrow-alt-circle-down&quot;&gt;&lt;/i&gt; Hämta fil&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
              &lt;div class=&quot;blockrow&quot;&gt;Revisionsnummer kommer att uppdateras:&lt;/div&gt;
              &lt;div class=&quot;blockrow center&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;blockheader&quot;&gt;&lt;div class=&quot;blockHeaderIcon&quot;&gt;&lt;i class=&quot;fas fa-circle&quot;&gt;&lt;/i&gt;&lt;h3 class=&quot;blockHeaderNumber&quot;&gt;2&lt;/h3&gt;&lt;/div&gt;&lt;h3 class=&quot;blockHeaderText&quot;&gt;Save File&lt;/h3&gt;&lt;/div&gt;
          &lt;div class=&quot;block&quot;&gt;
            &lt;form class=&quot;editForm&quot; id=&quot;editForm&quot;&gt;
              
            &lt;/form&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;blockheader&quot;&gt;&lt;div class=&quot;blockHeaderIcon&quot;&gt;&lt;i class=&quot;fas fa-circle&quot;&gt;&lt;/i&gt;&lt;h3 class=&quot;blockHeaderNumber&quot;&gt;3&lt;/h3&gt;&lt;/div&gt;&lt;h3 class=&quot;blockHeaderText&quot;&gt;Approval&lt;/h3&gt; &lt;p class=&quot;note&quot;&gt;Bla bla bla&lt;/p&gt;&lt;/div&gt;
          &lt;div class=&quot;block&quot;&gt;
              &lt;div class=&quot;blockrow&quot;&gt;&lt;div&gt;bla bla bla.&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  <p>HTML data Row:</p>
  <pre><code>        &lt;div class=&quot;admDoc&quot; data-rev=&quot;2&quot; data-row=&quot;232&quot; data-link=&quot;VS/Kvalitet/Instruktion/AM20_001_Riskanalys.pdf&quot; data-edit-link=&quot;VS/Kvalitet/Instruktion/AM20_001_Riskanalys.doc&quot;&gt;
      &lt;div class=&quot;note dokTyp&quot;&gt;Instruktion&lt;/div&gt;
      &lt;a target=&quot;blank&quot; href=&quot;VS/Kvalitet/Instruktion/AM20_001_Riskanalys.pdf&quot;&gt;
      &lt;div class=&quot;dokNamn&quot;&gt;Riskanalys&lt;/div&gt;&lt;/a&gt;
      &lt;div class=&quot;note dok_nr&quot;&gt;AM20:001&lt;/div&gt;
      &lt;div class=&quot;note rev&quot;&gt;Rev 2&lt;/div&gt;
      &lt;div class=&quot;icons&quot;&gt;
  &lt;div&gt;&lt;i class=&quot;fas fa-link tooltip&quot;&gt;&lt;span class=&quot;tooltiptext&quot;&gt;VS/Kvalitet/Instruktion/AM20_001_Riskanalys.pdf&lt;/span&gt;&lt;/i&gt;&lt;/div&gt;
      &lt;div class=&quot;editRow&quot;&gt;&lt;i class=&quot;far fa-edit&quot;&gt;&lt;/i&gt;&lt;/div&gt;
      &lt;div class=&quot;deleteRow&quot;&gt;&lt;i class=&quot;far fa-trash-alt&quot;&gt;&lt;/i&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>