HTML Textarea partially editable

Question

I want a textarea to be partially editable. The first column should be not editable and the second should be the place where the user will input this "answer".

The first column is people early, late and night and everything after that the user should be able to insert and everything before should readonly.

The script is only working for inline text but my text should be row1, row2 and row3 and I do not know how do it.

$('#people').keydown(function() {
  if ($(this).val().indexOf('people early: 
      people late:
      people night: ') !== 0) {
    var length = "This is constant.  ".length;
    var current = $(this).val();
    var after = current.slice(length);

    $(this).val("This is constant.  " + after);
  }
});

<textarea id="people">
     people early: 
     people late:
     people night:
    </textarea>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 1

I assume you should use 3 different inputs to get the 3 information you want then format a string to makes it look how you want it to be.