JSFiddle - React, Tailwind, and code Playground

by olragon

HTML

<html>
<body>
    <input type="text" name="text">
    <textarea name="textarea"></textarea>
    <select name="select">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <button onclick="return false;">Run</button>
</body>
</html>

JavaScript

jQuery(document).ready(function($) {
    
    $('button').click(function() {
      $(':input').val2html();
      console.log($('body').html());
    });
    
    
    $.fn.val2html = function() {
      this.andSelf().each(function() {
        var inputVal = $(this).val();
        if($(this).is('select')) {
          $('option', this).each(function(iOption, oOption) {
            if($(oOption).attr('value') === inputVal) {
              $(oOption).attr('checked', 'checked');
            }
          });          
        }
        else if($(this).is('textarea')) {
          $(this).append(inputVal);
        }
        else if($(this).is('input')) {
          $(this).attr('value', inputVal);
        }
      });
    }
});