HI Cannot check it at present as away form main computer etc, but The only things e have not touched on are your JS actions:

  function show(target) {
      event.preventDefault();
      document.getElementById(target).style.display = 'block';
  }

  function hide(target) {
      event.preventDefault();
      document.getElementById(target).style.display = 'none';
  }

The effect event.preventDefault(); will have not effect as there is no event being past. Best to use return false; Either within the the functions or on the onclick event.

   onclick="show('hidediv'); return false;"

Also you are giving it a target and if you list has more than one hidedivthen it still wont do this to the one you require it will basically find the first instance of hidediv and target that.

So this is why its probably showing the first task when you click the edit button, so me thinks this could be your JS functions not firing as they should.

To target the actual section your on need to be looked at even if you add an interator id to the div name

   <td id="hidediv{{ $number }}">
             <div id="hidediv-container">

  ......

    <a type="button" class="btn btn-success" onclick="show('hidediv{{ $number }} '); return false;"....

So that each DIV id is unique so easier to target within the js.

You will need to work out how to create the $number interator etc

Actually you could use the $task->id

   <td id="hidediv{{$task->id}}">
             <div id="hidediv-container">

  ......

    <a type="button" class="btn btn-success" onclick="show('hidediv{{  $task->id}} '); return false;"....

So each div would be <td id="hidediv2"... <td id="hidediv3... etc

Hope this helps.

@simondavies

i added the {{ $task->id }} to the hidediv and now it is grabbing the proper information, the hide div is now always showing within the table row?

I took off the prevent default from the javascript also, instead of passing the script function target do i pass it hidediv{{ $task->id}}?

Cool, just add the return false; at the end like:

  <a type="button" class="btn btn-success" onclick="show('hidediv{{  $task->id}} '); return false;" id="boot-buttons"><i class="fa fa-pencil-square-o"></i>Edit</a>

The return false should prevent the normal default action.

@simondavies

functionality is working for edit and delete and add now. The hidden div even with the return false is now always open, and showing in the table row. Do i need to change the javascript?

What do you mean? Do you mean that initially its all hidden , but then when you click edit it opens, then you cannot / or it wont close?

Or as soon as the page opens they are all open?

If its the latter then you will need to add some css so that all the hidden divs are initally display:none;.

so something like:

   td  [id^= hidediv] { display: none;}

Sorry not near a good computer as out and about.

@simondavies

thanks for everything, everything works exactly how it should!!! not sure which reply to check as the right answer cause they all were a huge help.

next up doing it all with AJAX

@jbowman99 not a problem matey we've all been there and are still :-)