Interactive Text highlighting and submission to a back end

Question

I'm looking to create a web page highlighter that will show a few paragraphs on screen but will then allow a person to highlight good lines in green and bad lines in red by highlighting a section of the text and then clicking a button (or typing a number, as is the case in thunderbird). I'd then like to be able to essentially submit this text to a background engine of some kind.

I've managed to build some jsfiddle code, but couldn't turn on the colour changing on the text and not sure how to get the text to submit to a backend routine.

This snippet isn't fully working but its a step in the right direction...

function myFunction1() {
  $("select#select1").change(function() {
    var color1 = $(this).val()
    $('#selectParagraph1').css('color', color1);
    $('#select1').css('color', color1);
  });
}

function myFunction2() {
  $("select#select2").change(function() {
    var color2 = $(this).val()
    $('#selectParagraph2').css('color', color2);
    $('#select2').css('color', color2);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table border="1" cellpadding="0">
  <tr>
    <td>
      <div id="selectParagraph1">This is the first paragraph</div>
    </td>
    <td>
      <select name="select1" id="select1" onclick="myFunction1()">
        <option value="red">red</option>
        <option value="blue">blue</option>
        <option value="green">green</option>
        <option selected="selected" value="black">black</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <div id="selectParagraph2">This is the second paragraph </div>
    </td>
    <td>
      <select name="select2" id="select2" onclick="myFunction2()">
        <option value="red">red</option>
        <option selected="selected" value="blue">blue</option>
        <option value="green">green</option>
        <option value="black">black</option>
      </select>
    </td>
  </tr>
</table>

Answer 1

To highlight text you can wrap it with any element (such as span) and set its background to the wanted color:

$('select').on('change', function() {
  var $this = $(this),
      color = $this.val(),
      textContainer = $this.closest('tr').find('.paragraph');
      
  textContainer.css('background', color);
}).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table border="1" cellpadding="0">
  <tr>
    <td>
      <div class="paragraph">This is the first paragraph</div>
    </td>
    <td>
      <select name="select1" id="select1">
        <option value="red">red</option>
        <option value="blue">blue</option>
        <option value="green">green</option>
        <option selected="selected" value="black">black</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <div class="paragraph">This is the second paragraph </div>
    </td>
    <td>
      <select name="select2" id="select2">
        <option value="red">red</option>
        <option selected="selected" value="blue">blue</option>
        <option value="green">green</option>
        <option value="black">black</option>
      </select>
    </td>
  </tr>
</table>

I refactored your code a little:

1. You can listen to any select change (not need to listen to each select separately).
2. You can find the paragraph element using .closest.
3. Trigger the change event to make the code to set the color when page load.

About sending it to the backend, well I don't know which server are you (want to) using but generally, you have 2 options: form submission or ajax (with jQuery).

Both of them send to the server a request with these params. After you get them in your server (maybe this question could help you with it), you can do with them anything you want, save them into DB or write them in file.

Let me know if something is missing.