Change the HTML of an Expanding Row - html

Question

I am looking to have a + change to a - when my table row expands. I have provided my code below and also through JS Fiddle here: https://jsfiddle.net/k37f0cbp/2/
$(document).ready(function() {
$('tr.parent')
.css("cursor", "pointer")
.attr("title", "click")
.click(function() {
$(this).siblings('.child-' + this.id).toggle();
});
$('tr[#class^=child-]').children('td').hide();
});
$if(('tr[#class^=child-]').is(":visible")).click(function() {
$('.plus', this).html('-');
});
th,
td {
border-bottom: 1px solid black;
}
th,
td {
padding: 15px;
}
tr:hover {
background-color: #f5f5f5;
}
[class*='child-row'] {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%">
<tbody>
<tr class="parent" id="row1" title="click">
<td><span class="plus">+</span></td>
<td>Paper Idea One</td>
</tr>
<tr class="child-row1">
<td>testing</td>
</tr>
</tbody>
</table>

Answer 1

$(document).ready(function ()
{
//add a flag
var expanded = false;
$('tr.parent')
.css("cursor", "pointer")
.attr("title", "click")
.click(function ()
{
$(this).siblings('.child-' + this.id).toggle();
//check flag, update value of a button and update a flag
if(expanded)
{
$(".plus").text("+");
expanded = false;
}
else
{
$(".plus").text("-");
expanded = true;
}
});
$('tr[#class^=child-]').children('td').hide();
});
$if (('tr[#class^=child-]').is(":visible")).click(function()
{
$('.plus', this).html('-');
});

Answer 2

After many more hours exploring this, I combined what the contributor above added with some other things I experimented with and came up with a more elegant and accurate answer that accounts for multiple rows. The only trick here is adding an id to the plus element that is equivalent to the parents id.
$(document).ready(function ()
$('tr.parent')
.css("cursor", "pointer")
.attr("title", "click")
.click(function ()
{
$(this).siblings('.child-' + this.id).toggle();
var s = this.id;
if ($(this).next().is(":visible")) {
$('#' + s + '.plus').html('-');
}
if ($(this).next().is(":hidden")) {
$('#' + s + '.plus').html('+');
}
})
)};