title: Buttons on grid with transitioning inputs
body: <p><strong>Buttons on Grid with Input Transition</strong></p>
  <blockquote>
  <p><strong>Question:</strong> I have been trying to build a grid with a number of buttons (to be flexible depending on data) such that each button transitions into an input box to  be filled and submitted (after pressing ok).
  I couldn't manage to separate each buttons jquery to do the following:</p>
  </blockquote>
  <ol>
  <li>on click;</li>
  <li>open input + ok (submit button);</li>
  <li>client fills in with number % and press ok;</li>
  <li>button goes back to same place.</li>
  </ol>
  <p>Here is what I've done so far :</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>$('#button1').click(function(){
     $(this).hide();
     $('form').show();
  });
  
  $('#button2').click(function(){
     $(this).hide();
     $('form').show();
  });
  
  $('#button3').click(function(){
     $(this).hide();
     $('form').show();
  });
  
  $('#button4').click(function(){
     $(this).hide();
     $('form').show();
  });
  
  $('#ok').click(function(){
     $('#button2').show();
     $(this).hide();
     $('form').hide();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#button1 {
      width: 50px;
      height: 40px;
      background: #f1f1f1;
  }
  
  #button2 {
      width: 50px;
      height: 40px;
      background: #f1f1f1;
  }
  
  #button3 {
      width: 50px;
      height: 40px;
      background: #f1f1f1;
  }
  
  #button4 {
      width: 50px;
      height: 40px;
      background: #f1f1f1;
  }
  
  #ok {
    background:blue;
  }
  
  .grid-container {
    width: 100%;
    display: grid;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items:stretch;
    background-color: #f1f1f1;
    padding: 10px;
  }
  
  .grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
  }
  
  .grid-item : hover {
   background-color: #3e8e41;
   }</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;div class='grid-container'&gt;
  
  &lt;div id="button1" class="grid-item"&gt;Button 1&lt;/div&gt;
  &lt;form name="input"  method=[] style="display: none;"&gt;
      &lt;div action="#"&gt;
        &lt;input  type="number" id="comment" placeholder="%"/&gt;
        &lt;input type='submit' id='ok' value='ok'&gt;
      &lt;/div&gt;    
  &lt;/form&gt;
  
  &lt;div id="button2" class="grid-item"&gt;Button 2&lt;/div&gt;
  &lt;div id="button3" class="grid-item"&gt;Button 3&lt;/div&gt;
  &lt;div id="button4" class="grid-item" type="button"&gt;Button 4&lt;/div&gt;
  &lt;form name="input"  method=[] style="display: none;"&gt;
      &lt;div action="#"&gt;
        &lt;input  type="number" id="comment" placeholder="%"/&gt;
        &lt;input type='submit' id='ok' value='ok'&gt;
      &lt;/div&gt;    
  &lt;/form&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Well, I couldn't find this anywhere on the internet and as you see there are plenty of mistakes.</p>
  <p>If anyone could help me, please? It's going to be really appreciated.</p>