title: Replace Single Word on Button Click
body: <p>The amount of buttons on my page are dynamically created, so adding an ID attribute to however many there are isn't ideal. I also of course do not want to add a class, as attaching the same class (buttons are generated in a PHP loop), will affect them all.</p>
  
  <p>Here's what I mean.</p>
  
  <p>All the buttons have the word <code>View</code> in them.</p>
  
  <pre><code>&lt;button&gt;&lt;span&gt;View&lt;/span&gt;&lt;br /&gt;One&lt;/button&gt;
  &lt;button&gt;&lt;span&gt;View&lt;/span&gt;&lt;br /&gt;Two&lt;/button&gt;
  &lt;button&gt;&lt;span&gt;View&lt;/span&gt;&lt;br /&gt;Three&lt;/button&gt;
  </code></pre>
  
  <p>Using this jQuery function, I'm able to change the single word (and not the entire button text as my previous failed experiments have shown).</p>
  
  <pre><code>$("button").click(function() {
       $("button span").html($("button span").html() == 'View' ? 'Hide' : 'View');
  });
  </code></pre>
  
  <p>But this script is changing the values for all the buttons with the word <code>View</code>.</p>
  
  <p>How can I modify this (or use a different method), to only target the button clicked and not all buttons (as I said, preferably without adding ID attributes).</p>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/jpb1a674/1/" rel="nofollow noreferrer">https://jsfiddle.net/jpb1a674/1/</a></p>