Q:

In native JavaScript how do I access an element whose properties I have manipulated so that it will fire the correct function

Test Page: http://www.i-cre8.com/test-files/stackoverflow/access-changed-button.html
When the Unarchive button is clicked I change it's properties to become a Archive button but when you click it again it does not fade the table row out as expected it actually still behaves as if it's an Unarchive button.
In jQuery I would have used .on('click',... to access elements changed dynamically, how do I achieve this in native JavaScript ?
Sample Code:
<table border="1" class="i8_zebra">
  <thead>
    <tr>
      <th>Quote #</th>
      <th>Date</th>
      <th>Client</th>
      <th>Sub Total</th>
      <th>Shipping</th>
      <th>Install</th>
      <th>Misc. Charges</th>
      <th>Customer Savings</th>
      <th>Tax</th>
      <th>Grand Total</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr data-id="206">
      <td class="textCenter"><a href="/salesplustools/quotes/details/206">206</a></td>
      <td class="textCenter">March 8th, 2015</td>
      <td>Matthew Ward 123 Magnolia St Hempstead NY 11550-1234</td>
      <td class="textRight">$6849.96</td>
      <td class="textRight">$50.00</td>
      <td class="textRight">$100.00</td>
      <td class="textRight">$0.00</td>
      <td class="textRight"><span class="hilite-red">-$750.00</span></td>
      <td class="textRight">0.00</td>
      <td class="textRight">$6249.96</td>
      <td class="textCenter"><input class="btn btn-sm btn-gray" type="button" name="row_Delete_206" value="Archive Quote" data-id="206"></td>
    </tr>
    <tr data-id="204">
      <td class="textCenter"><a href="/salesplustools/quotes/details/204">204</a></td>
      <td class="textCenter">March 5th, 2015</td>
      <td>Matthew Ward 123 Magnolia St Hempstead NY 11550-1234</td>
      <td class="textRight">$2199.98</td>
      <td class="textRight">$80.00</td>
      <td class="textRight">$0.00</td>
      <td class="textRight">$0.00</td>
      <td class="textRight"><span class="hilite-red">-$255.00</span></td>
      <td class="textRight">131.62</td>
      <td class="textRight">$2156.60</td>
      <td class="textCenter"><input class="btn btn-sm btn-blue" type="button" name="row_Add_204" value="Unarchive Quote" data-id="204"></td>
    </tr>
    <tr data-id="203">
      <td class="textCenter"><a href="/salesplustools/quotes/details/203">203</a></td>
      <td class="textCenter">March 5th, 2015</td>
      <td>Matthew Ward Apt C 5800 Springfield Gardens Springfield VA 22162-1058</td>
      <td class="textRight">$5099.97</td>
      <td class="textRight">$80.00</td>
      <td class="textRight">$0.00</td>
      <td class="textRight">$0.00</td>
      <td class="textRight"><span class="hilite-red">-$350.00</span></td>
      <td class="textRight">311.12</td>
      <td class="textRight">$5141.09</td>
      <td class="textCenter"><input class="btn btn-sm btn-blue" type="button" name="row_Add_203" value="Unarchive Quote" data-id="203"></td>
    </tr>
    <tr data-id="127">
      <td class="textCenter"><a href="/salesplustools/quotes/details/127">127</a></td>
      <td class="textCenter">December 30th, 2014</td>
      <td>Matthew Ward Apt C 5800 Springfield Gardens Springfield VA 22162-1058</td>
      <td class="textRight">$4898.99</td>
      <td class="textRight">$0.00</td>
      <td class="textRight">$0.00</td>
      <td class="textRight">$0.00</td>
      <td class="textRight"><span class="hilite-red">-$200.00</span></td>
      <td class="textRight">0.00</td>
      <td class="textRight">$4698.99</td>
      <td class="textCenter"><input class="btn btn-sm btn-gray" type="button" name="row_Delete_127" value="Archive Quote" data-id="127"></td>
    </tr>
    <tr data-id="4">
      <td class="textCenter"><a href="/salesplustools/quotes/details/4">4</a></td>
      <td class="textCenter">September 15th, 2014</td>
      <td>Matthew Ward Apt C 5800 Springfield Gardens Springfield VA 22162-1058</td>
      <td class="textRight">$6348.98</td>
      <td class="textRight">$0.00</td>
      <td class="textRight">$0.00</td>
      <td class="textRight">$0.00</td>
      <td class="textRight"><span class="hilite-red">-$0.00</span></td>
      <td class="textRight">0.00</td>
      <td class="textRight">$6348.98</td>
      <td class="textCenter"><input class="btn btn-sm btn-blue" type="button" name="row_Add_4" value="Unarchive Quote" data-id="4"></td>
    </tr>
  </tbody>
</table>
<script type="text/javascript">
// <![CDATA[

// fade out see http://www.chrisbuttery.com/articles/fade-in-fade-out-with-javascript/

function fadeOut(el){
  el.style.opacity = 1;

  (function fade() {
    if ((el.style.opacity -= .1) < 0) {
      el.style.display = "none";
    } else {
      requestAnimationFrame(fade);
    }
  })();
}

var archiveQuote = function(event) {

  event.preventDefault();  // we don't want the link to be followed (default browser behavior)
  var target = event.target; // get the event target (what `this` would refer to in jQuery)
  var pkID = target.getAttribute('data-id'); // the id we need to pass for archiving
  var parent = target.closest('tr'); // find the table row that we need to remove
  target.blur(); // clear focus  
  var nm = target.getAttribute('name'); // the name of the button pressed
  console.log(nm);  

  // fade out row
  fadeOut(parent);

}

var unarchiveQuote = function(event) {

  event.preventDefault();  // we don't want the link to be followed (default browser behavior)
  var target = event.target; // get the event target (what `this` would refer to in jQuery)
  var pkID = target.getAttribute('data-id'); // the id we need to pass for unarchiving
  target.blur(); // clear focus
  var nm = target.getAttribute('name'); // the name of the button pressed
  console.log(nm); 

  // change button
  var btnName = target.getAttribute('name');
  target.classList.remove('btn-blue');            
  target.classList.add('btn-gray');
  target.value = 'Archive Quote';
  target.setAttribute('name', btnName.replace('_Add_','_Delete_'));  

}

var btnArchive = document.querySelectorAll('[name^="row_Delete_"]');
for(var i = 0; i < btnArchive.length; i++) { // loop thru all elements starting with...
  btnArchive[i].addEventListener( 'click', function(event) {
    archiveQuote.call(this, event);
  }, false);
}

var btnUnarchive = document.querySelectorAll('[name^="row_Add_"]');
for(var i = 0; i < btnUnarchive.length; i++) { // loop thru all elements starting with...
  btnUnarchive[i].addEventListener( 'click', function(event) {
    unarchiveQuote.call(this, event);
  }, false);
}

// ]]>
</script>

A:

You will need to attach the archive functionality to the button that changed to "Archive", like (https://jsfiddle.net/krsmhLav/):
var unarchiveQuote = function(event) {
  ...
  target.setAttribute('name', btnName.replace('_Add_','_Delete_'));  

  *target.addEventListener( 'click', function(event) {
    archiveQuote.call(this, event);
  }, false);*
}

