We Keep Coding

Add new row before specific element

My table is composed of DAYS - Monday, Tuesday .... and rows to each day.
Each day in table has ADD button
By clicking on ADD button, JS add new row to particular day (monday, tuesday etc...).
Currently, JS add new row directly inside <tr> element where ADD button is stored.
I would like that by click ADD button, new row is added BEFORE next <tr class="day"> element
I have already tried: .append(), .appendTo(), .before(), .insertBefore(), any of them did not work for me.
Any ideas how to do that? --> adding new rows to the end of part of the table (or before next part of the table).
$this element:
`<a class="add_fields btn btn-primary workingday-row" data-id="70358063118960" data-fields="<tr> <td><input label="false" type="time" name="teacher[working_days_attributes][0][working_hours_attributes][70358063118960][from]" id="teacher_working_days_attributes_0_working_hours_attributes_70358063118960_from" /></td> <td><input label="false" type="time" name="teacher[working_days_attributes][0][working_hours_attributes][70358063118960][to]" id="teacher_working_days_attributes_0_working_hours_attributes_70358063118960_to" /></td> <td> <input type="hidden" value="false" name="teacher[working_days_attributes][0][working_hours_attributes][70358063118960][_destroy]" id="teacher_wor`king_days_attributes_0_working_hours_attributes_70358063118960__destroy" /> <a class="remove_record" href="#">Remove wokring Hour</a> </td></tr" href="#">Add Working Hour</a>
Jquery part of code:
$(this).closest('tr').append($(this).data('fields').replace('booking_booking_working_days_working_day_id', time));
HTML:
<tr class="day">
<td>
Monday
</td>
</tr>
<tr>
<td>HERE IS MY ADD BUTTON</td>
<tr>
HERE ARE NEWLY ADDED FIELDS
</tr>
</tr>
HERE I WOULD LIKE TO HAVE NEWLY ADDED FIELDS (probably inside another <tr></tr>)
<tr class="day">
<td>
Tuesday
</td>
</tr>

.append(html) inserts the html inside the element it's called on. Instead you can use .insertAdjacentElement('afterend', html). The key here is 'after end which tells the html be inserted after the targetElement itself.

Making HTML elements editable after a click of a button and save on the database

I've researched about this for a while now but I haven't really gotten my head wrapped around it as an amateur in design. How do make my following markup editable after after the user clicks on the 'Edit' button I had created. So here it is:
<div class='wrapper'>
<div class='topinfobar'>
<p>Contact Info</p>
</div>
<table>
<tbody>
<tr><td><p class='leftspacing'>Cellphone Numbers</p></td><td><p>072 215 3372</p></td>
<tr><td><p class='leftspacing'>Phone Numbers</p></td><td><p>011 310 9967</p></td>
<tr><td><p class='leftspacing'>email address</p></td><td><p>s.nyama9#gmail.com</p></td>
</tbody>
</table>
<button>Change</button>
</div>
I wanna be able to change only the Cellphone Numbers etc. by just pressing the Edit button I had created. I'm using php, I just did that markup for design purposes. And I want the button to change from 'Change' to 'Done' while the user is still editing their details. So, the info is only readable before you click on the Edit button and it changes to 'Done' after the user had clicked it

You can put those values in inputs but it's look like regular content using readonly attribute and css, and just toggle class and the attribute.
$('#edit').click(function(){
$('#form').toggleClass('view');
$('input').each(function(){
var inp = $(this);
if (inp.attr('readonly')) {
inp.removeAttr('readonly');
}
else {
inp.attr('readonly', 'readonly');
}
});
});
.view input {
border:0;
background:0;
outline:none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='topinfobar'>
<p>Contact Info</p>
</div>
<table id="form" class="view">
<tbody>
<tr>
<td>
<p class='leftspacing'>Cellphone Numbers</p>
</td>
<td>
<p><input type="text" value="072 215 3372" readonly/></p>
</td>
</tr>
<tr>
<td>
<p class='leftspacing'>Phone Numbers</p>
</td>
<td>
<p><input type="text" value="011 310 9967" readonly/></p>
</td>
</tr>
<tr>
<td>
<p class='leftspacing'>email address</p>
</td>
<td>
<p><input type="email" value="s.nyama9#gmail.com" readonly/></p>
</td>
</tr>
</tbody>
</table>
<button id="edit">Change</button>

There are a number of different ways you can do this, but the "classical" way would be to put the values in <input/> tags with IDs that are styled to be transparent. Wrap the whole table in a form, then use JavaScript when the user clicks the button to remove a disabled property from each of the input fields and change the button label. The second click of the button would then be validation and/or a form submit. The easiest way to keep track of which is the first and second click would be to compare text, but you might want to just set a variable on the element instead. Try here for a good starting point on pure-Javascript form submission or here for JQuery. This is a Stack-Overflow question about making input fields transparent.

Jsp : Checkbox and Hyperlink dependency

I am using JSP and Struts2.
If the user selects the checkbox without clicking on hyperlink, user should get the error msg above the checkbox line.
I think on click of hyperlink I should call one function which sets the global var to true. onclick of checkbox, I should call a function which checks the var val and if this is false error should display.
In case of checkbox uncheck error should not be visible.
Its like a terms and we want that user should click on hyperlink to see terms.
<tr>
<td colspan="2" style="padding-left: 3%;">
<s:text name="Text1" />
<s:text name="Text2" />
<s:text name="Text3" />
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 3%;"><s:checkbox name="isT" id="isT" label="isT" value="%{isT}" tabindex="12" /> <s:text name="isTer" />
</td>
</tr>

Why dont you enable checkbox on click of hyperlink. Till that time disabled the checkbox.

Jquery get different input hidden value to a link

I making a context menu and it almost done, just left this problem for me, but i have no idea to do this:
This is the JS Fiddle
Get different value from input hidden to a single link, because I want to pass it into a controller action
<table>
<tr>
<td class="element">im here
<input type="hidden" id="theid" name="theid" value="1"/>
</td>
</tr>
<tr>
<td class="element">im there
<input type="hidden" id="theid" name="theid" value="2"/>
</td>
</tr>
<tr>
<td class="element">im where
<input type="hidden" id="theid" name="theid" value="3"/>
</td>
</tr>
</table>
<div type="context" class="menu"> // link
<label class="menuitem">Cancel this app</label>
</div>
I want to pass the value to theid , for example when right click im here the link should get the hidden value = 1 and so on, any suggestion to do that ? Thanks

The mouse event object contains the target you were clicking on. So you can access that, pass it to jQuery and do whatever you want with it, eg. accessing the ID of the input.
$(e.target).find('input').attr('id');
And as the other commentators, I'm hoping that your IDs are different ;)
Edit: I re-read your question, you just want the value. So you don't need the ID theid in your markup overall (for this usecase). Getting the value from the clicked element:
$(e.target).find('input').val();
And working, see the alert(): See this jsfiddle

Setting elements in a table to be focused by tabbing

I have a table that I need to make focusable by tabbing. Right now as I tab through my page it will jump over the table entirely. I have added a href="#" and that allows tab focus on the element I put that on, but that breaks my onclick Javascript that I have. Is there any other way to do this other then doing tab indexing?

I didn't understand your questions entirely but if you are talkinf about form fill ups then use this method, and tab the input fields with a tab.. You can also change tab numbers accordingly,
<form>
<table>
<tr>
<td><input tabindex="1" name=""/></td>
<td><input tabindex="3" name=""/></td>
</tr>
<tr>
<td><input tabindex="2" name=""/></td>
<td><input tabindex="4" name=""/></td>
</tr>
</table>