Add a separator between certain columns on New/Edit Form on SharePoint 2013 OOTB

Question

I have the following modified version of Curtis Weir's field hiding script from dmcinfo.com which I want to run using the SharePoint OOTB Script Editor:

 <script src="//code.jquery.com/jquery-latest.min.js"></script>
<script>
    function SeparateFields() {
        //Enter the fields you would like to have a separator at the bottom here.
        fieldsToSeparate = ["Title","Document Type"]

        //Get all SharePoint fields
        var formFieldTitles = $(".ms-formtable td.ms-formlabel h3.ms-standardheader");

        //Iterate over each row in the form
        formFieldTitles.each(function () {
            //Get the text of the field title
            var textToMatch = $(this).text();
            //Get the table row associated with this title
            var currentRow = $(this).closest('tr');

            //Iterate over our list of fields we wish to separate
            for (var i = 0; i < fieldsToSeparate.length; i++){
                var field = fieldsToSeparate[i];
                //Match the SharePoint field name to our field name
                if (textToMatch.toLowerCase().replace("*", "").trim() === field.toLowerCase().replace("*", "").trim()){
                    //Separate this field
                    $(currentRow).css({border-bottom: "1px solid black"})
                }
            }
        });
    }

    function AddToBodyOnLoad(){
        //Ensure that our function is called last by pushing it again
        _spBodyOnLoadFunctionNames.push("SeparateFields");
    }

    //Add our function to the array of onload functions
    _spBodyOnLoadFunctionNames.push("AddToBodyOnLoad");
</script>

It works great if I want to hide a column, for example "Name" which is normally "blocked" and not editable.(by substituting $(currentRow).css({border-bottom: "1px solid black"}) with $(currentRow).hide(); and naming the variables appropriately.

What I need to do now is to change the style of certain columns like "Title" and "Document Type" to also contain a separator ( a line underneath them to separate section within a form. What I tried does not work at all. Could you please help me achieve this?

PS: I have found that the following code adds a bottom border line for every column in my form but this is outside the scope since I only need to separate certain columns:

   <style type="text/css">

    #onetIDListForm .ms-formtable .ms-formlabel,
    #onetIDListForm .ms-formtable .ms-formbody
    {
        border-bottom: 5px solid black;
    </style>

PS2 : I cannot insert files in the assets lib. Can only use script editor web part.

PS3 : I am new to JS/CSS/HTML and have 0 experience in integrating such features in SharePoint

EDIT 01.03.2017

This is what I got in the console:

HTML1300: Navigation occurred. File: EditForm.aspx

DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337 File: start.aspx

HTML1512: Unmatched end tag. File: EditForm.aspx, Line: 95, Column: 9

HTML1514: Extra "" tag found. Only one "" tag should exist per document. File: EditForm.aspx, Line: 96, Column: 1

SCRIPT1006: Expected ')' File: EditForm.aspx, Line: 862, Column: 1

SEC7115: :visited and :link styles can only differ by color. Some styles were not applied to :visited. File: EditForm.aspx

EDIT 06.03 Here are the new log entries

DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337

HTML1300: Navigation occurred. File: EditForm.aspx

HTML1512: Unmatched end tag. File: EditForm.aspx, Line: 95, Column: 9

HTML1514: Extra "" tag found. Only one "" tag should exist per document. File: EditForm.aspx, Line: 96, Column: 1

SEC7115: :visited and :link styles can only differ by color. Some styles were not applied to :visited. File: EditForm.aspx

Answer 1

This is probably not the answer you really want but, for my money, Mark Rackley's method for customizing OOTB list forms really gives you the most amount of control over what the end result looks and acts like.

The basic idea, here, is that you build your own HTML framework (I like to use the Office UI Fabric grid system, myself) and then let Rackley's script loop over the actual fields themselves and plop them into my design.

Edit

Rather than try and shove this in the comment, thought I'd add this here, where I have more room.

If you can't convince your site/site collection/farm admins to let you put some js and css files in SiteAssets, let's just take the pieces of Rackley's script that might help. Namely, iterating over the tds in the ms-formtable and identifying the fields we want by that comment text included in the html:

$('table.ms-formtable td').each(function(){
    if(this.innerHTML.indexOf('FieldName="Title"')!=-1){
        $(this).css('border-bottom','5px solid black');
    }
}

Edit #2 Inre my comments, below:

So, you wrote:

$('table.ms-formtable td').each(function separate(){
    if(this.innerHTML.indexOf('FieldName="Title"')!=-1){ 
        $(this).css('border-bottom','5px solid black'); 
    } }); 

function AddToBodyOnLoad(){ 
    _spBodyOnLoadFunctionNames.push("separate"); 
} 
_spBodyOnLoadFunctionNames.push("AddToBodyOnLoad");

I'm not sure you need to worry about that BodyOnLoad business, I think the script editor web part takes care of that for you. And you don't need to name the function inside of $.each. So we can make sure we're actually selecting things and that our condition is being met, we need to do some console logging, like so:

$('table.ms-formtable td').each(function(){
    console.log(this) //to make sure our jQuery selector is working.
    if(this.innerHTML.indexOf('FieldName="Title"')!=-1){
        console.log(true); //to make sure our condition is hitting.
        $(this).css('border-bottom','5px solid black');
    }else{
        console.log(false);
    }
});

For the first console.log, you should see a bunch of td's pop up in your Developer tools console. For the second, you should see one true and a bunch of falses, indicating the td that meets our condition and all the tds that don't.