title: How do I define a unique button type?
body: <p>I have two input tags so for this example I want to have two buttons that can the change color of a text or italicize. In my function I call the button, but they are not unique. My &quot;change color&quot; button will also italicize and vice versa which makes sense. How can I fix this?</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>$(document).ready(function(){
    $("input").click(function(){
      $('#myForm [type="text"]').css("color", "red");
    });
  });
  
  $(document).ready(function(){
    $("input").click(function(){
      $('#myForm [type="text"]').css("font-style", "italic");
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.table {
      border: solid 1px #DDEEEE;
      border-collapse: collapse;
      border-spacing: 0;
      font: normal 13px Arial, sans-serif;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;form id="myForm"&gt;
      &lt;table class="table"&gt;
          &lt;thead&gt;
          &lt;tr&gt;
               &lt;th&gt;text&lt;/th&gt;
               &lt;th&gt;change color&lt;/th&gt;
               &lt;th&gt;italicize&lt;/th&gt;
          &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;input type="text" value="HELLO WORLD!"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="button" value="change color"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="button" value="italicize"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>