Jquery- Selecting individual word from a text

Question

How do I select a word using Jquery and save that into DB. ie, Say I have the following in my page,

"<p>This is a beautiful sentence </p>"

If I click on 'beautiful', I want to show a pop up option "add". If I click on "add", the word "beautiful" will be saved in my existing database of words. If i click it again It wont be saved, the database contains unique words.

I am working in Django.

Edit: I tried the following:

<script>
$(document).ready(function(){
  $("p").click(function(){
    var value = $(this).text();
    var input = $('#my_input');
    input.val(value);
  });            
});    
</script>

Answer 1

Example:

$(function() {
  $("p.allow-click span").click(function() {
    var value = $(this).text();
    var input = $('#my-input');
    input.val(value);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="allow-click"><span>This</span> is a <span>beautiful</span> <span>sentence</span>.</p>
<input id="my-input" type="text" />

As you can see, this allows each specific word to have a click event. You can use almost any tag, yet <span> is the least invasive in a sense. You could use <b>, <i>, or some other HTML Tag. These may change the type face or look of the text where <span> will not.

Update

If you do not want to manually edit the HTML, but do it all in jQuery, you could something like:

$(function() {
  function applyClick($t) {
    var inner = $t.text().trim();
    var trail = false;
    if (inner.slice(-1) == ".") {
      trail = true;
      inner = inner.slice(0, -1);
    }
    var parts = inner.split(" ");
    $.each(parts, function(k, v) {
      parts[k] = "<span>" + v + "</span>";
    });
    var myInner = parts.join(" ");
    if (trail) {
      myInner = myInner + ".";
    }
    $t.html(myInner);
    $t.find("span").click(function() {
      var value = $(this).text();
      var input = $('#my-input');
      input.val(value);
    });
  }
  applyClick($(".allow-click"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="allow-click">This is a beautiful sentence.</p>
<input id="my-input" type="text" />

Hope that helps.