title: Replacing an input type text to an image using jQuery
body: <p>I have a list of input types I need to replace with their respective images.</p>
  
  <pre><code>&lt;input type="text" id="user_fruitName_0_fruit_type" name="user[fruitName][0][fruit_type]" disabled="disabled" required="required" class="show_fruit form-control" value="MELON" /&gt;
  
  &lt;input type="text" id="user_fruitName_1_fruit_type" name="user[fruitName][1][fruit_type]" disabled="disabled" required="required" class="show_fruit form-control" value="STRAWBERRY" /&gt;
  
  &lt;input type="text" id="user_fruitName_2_fruit_type" name="user[fruitName][2][fruit_type]" disabled="disabled" required="required" class="show_fruit form-control" value="BLUEBERRY" /&gt;
  </code></pre>
  
  <p>The ID of each input are randomised so I can't use that as a unique ID. Tried this but it doesn't work because of the repeat of class. </p>
  
  <pre><code>    var str = $(this).attr('value')
      if (str = 'MELON'){
          $( ".show_fruit" ).replaceWith( "&lt;img src='img/melon_logo.png'" )
      }
      else if (str = 'STRAWBERRY'){
          $( ".show_fruit" ).replaceWith( "&lt;img src='img/strawberry_logo.png'" )
      }
      })
  </code></pre>
  
  <p>Any best way to do this? Help a noob here!</p>