jQuery: Select paragraphs by ID

Click a button to toggle between a dynamically applied class and being without a class

Note that we use addClass instead of toggleClass for the first paragraph below: Paragraph one remains blue, does NOT toggle

This is paragraph 1.

This is paragraph 2.

This is paragraph 3.

This is paragraph 4.

The Code START

    
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

    <script type="text/javascript">
      function stripe1() {
        $('#first').addClass('striped');
      }
      function stripe2() {
        $('#second').toggleClass('striped');
      }
      function stripe3() {
        $('#third').toggleClass('striped');
      }
      function stripe4() {
        $('#fourth').toggleClass('striped');
      }
    </script>

    <style type="text/CSS">>
      p.striped {
        background-color: cyan;
      }
    </style>
    
    <style type="text/CSS">
    <!--
        .code { color: red;}
        .back { background-color: yellow; }
    -->
    </style>
    
  </head>

  <body>
    <h1>jQuery: Select paragraphs by ID</h1>
    <p>
    Click a button to toggle between a dynamically applied class and being without a class</p>

    <div>
      <p id="first">This is paragraph 1.</p>
      <p id="second">This is paragraph 2.</p>
      <p id="third">This is paragraph 3.</p>
      <p id="fourth">This is paragraph 4.</p>
    </div>

    <form action="">
        <input type="button" value="Stripe first" onclick="stripe1()"></input>
        <input type="button" value="Stripe second" onclick="stripe2()"></input>
        <input type="button" value="Stripe third" onclick="stripe3()"></input>
        <input type="button" value="Stripe fourth" onclick="stripe4()"></input>
    </form>