JSFiddle - React, Tailwind, and code Playground

by Kamlesh Kushwaha

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<input type="text" value="This not asf  is my Text">
<input type="text" value="This is my Text">
<input type="text" value="This is my Text">
<input type="text" value="This is my Text">
<input type="text" value="This is my Text">
<input type="text" value="This is my Text">
<input type="text" value="This is my Text">
<input type="text" value="This is my Text">
<button>
  Get Values
</button>
<textarea class="result"></textarea>

CSS

.selected {
        background: #f0f0f0;
        border: 1px solid green
      }
      
      textarea {
        height: 0;
        width: 0;
        opacity: 0;
      }

JavaScript

$(document).ready(function() {
      $("input").click(function() {
        $(this).toggleClass("selected");
      });
      $("button").click(function() {
        var result = '';
        $(".selected").each(function() {
          result += $(this).val();
        });
        $("textarea").val(result);
        $("textarea").select();
        try {
          var text = document.execCommand('copy');
          //Selected text will be present in the clipboard.
          alert(text)
        } catch (err) {
          console.log('Error');
        }
      });
    });