html:
<p>Alice was a
<select id="behave">
  <option value="good">good</option>
  <option value="naughty">naughty</option>
</select>
<span class="boygirl">girl</span>.
 <span class="plotelement1">
  <span class="HeShe">She</span> was constantly being told off by
  <span class="hisher">her</span> <span class="mainparent">mother</span>
 </span>.
</p>

js:
function genderChange(){
  var newgender = $("#gender").val();
  if(newgender == "male"){
    $(".heshe").text("he");
    $(".HeShe").text("He");
    $(".himher").text("him");
  } else {
    $(".heshe").text("she");
    $(".HeShe").text("She");
    $(".himher").text("her");
  }
}
function changeBehaviour(){
  switch($("#behave").val()){
  case "good":{
    $(".plotelement1").html('<span class="HeShe">She</span> made <span class="hisher">her</span> parents proud of <span class="himher">her</span> and they told <span class="himher">her</span> all the time how good <span class="heshe">she</span> was.');
    break;
  }
  default:{
    $(".plotelement1").html('<span class="HeShe">She</span> was constantly being told off by <span class="hisher">her</span> <span class="mainparent">mother</span>');
  }
  }
genderChange();
}

<p>
    <select id="gender">
        <option value="male">male</option>
        <option value="female">female</option>
    </select>
    Alice was a
    <select id="behave">
        <option value="good">good</option>
        <option value="naughty">naughty</option>
    </select>
    <span class="boygirl">girl
    </span>.
    <span class="plotelement1">
        <span class="HeShe">She</span> was constantly being told off by
        <span class="hisher">her</span>
        <span class="mainparent">mother</span>
    </span>.
</p>

<script>
function genderChange(){
  var newgender = $("#gender").val();
  if(newgender == "male"){
    $(".heshe").html("he");
    $(".HeShe").html("He");
    $(".himher").html("him");
    $(".hisher").html("his");
  } else {
    $(".heshe").textContent = "she";
    $(".HeShe").textContent = "She";
    $(".himher").textContent = "her";
    $(".hisher").html("her");
  }
}
$(function(){
        changeBehaviour();//      These 2 lines run after loading the whole page.
        genderChange();   //

    $("#gender").change(function(){
        changeBehaviour();//    Change the behaviours first
        genderChange();   //    Then change the gender as the behaviour code has
                          //    gender's span like ".hisher" so this has to be the
                          //    order.
    });
    $("#behave").change(function(){
      changeBehaviour();
      genderChange();
    })
});
function changeBehaviour(){
  switch($("#behave").val()){
  case "good":{
    $(".plotelement1").html('<span class="HeShe">She</span> made <span class="hisher">her</span> parents proud of <span class="himher">her</span> and they told <span class="himher">her</span> all the time how good <span class="heshe">she</span> was.');
    break;
  }
  default:{
    $(".plotelement1").html('<span class="HeShe">She</span> was constantly being told off by <span class="hisher">her</span> <span class="mainparent">mother</span>');
  }
}
}
</script>

$(".hisher").html("his")

<div id="female">
  <p id="HE" ></p>
  <p id="CAPHIS" ></p>
</div>
<div id="male">
  <p id="HIS" ></p>
  <p id="CAPHIM" ></p>
</div>

function getPronoun(gender, id) {
  // array of pronouns to find
  var pronouns = ["she", "her", "her", "he", "his", "him"];

  // array of the last two letters of incoming pronouns in id parameter
  var ids = ["HE", "IS", "IM"];

  // get the index of the ids array matching the last two letters of id parameter
  var index = ids.indexOf(id.slice(-2));

  // if gender parameter is male, add 3 to the index
  index = gender == 'male' ? index + 3 : index;

  // use index to select the proper pronoun from the pronouns array
  // and capitalize it if CAP is present in the id parameter
  return id.indexOf('CAP') > -1 ?  cap(pronouns[index]) : pronouns[index];
}

function cap(input) {
  return input.charAt(0).toUpperCase() + input.substr(1);
}